将离子页拆分为2个垂直部分，使第二部分可滚动并限制高度

Question

我试图将IONIC页划分为2个垂直部分。第一部分包含一个快速响应的YouTube iframe，第二部分包含项目列表。这两个div的高度总和应该是页面的总高度。

我已经能够使YouTube视频iframe响应。现在我需要调整项目DIV的高度，以便占据离子内容（视图页面）的其余高度。我尝试了各种解决方案，但没有成功！有没有什么办法可以调整DIV项的高度并使其滚动？当我定义高度时它滚动得很好，但如果高度没有定义，则不会滚动。高度可以动态计算吗？我非常感谢你的帮助。谢谢。

HTML

<ion-content scroll="false"> 
    <!-- video wrapper --> 
    <div class="videoDiv"> 
     <div class="videoWrapper"> 
     <div class="videoWrapperIframe"> 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/-v2ZDYMu1Rc" frameborder="0" allowfullscreen></iframe> 
     </div> 
     </div> 
    </div> 
    <!-- item wrapper --> 
    <div class="itamWrapper"> 
    <div class="itamWrapperItem"> 
     <ion-scroll delegate-handle="item" direction="y"> 
      <ol class="list"> 
      <li class="item" ng-repeat="item in items"> 
      {{item.id}} 
      </li> 
     </ol> 
     </ion-scroll> 
    </div> 
    </div> 
</ion-content> 

CSS

.videoDiv { 
    display:block; 
    max-width: 400px; 
    margin-right: auto; 
    margin-left:auto; 
} 
.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
    background-color:#ededed; 
} 
.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.itamWrapper { 
    position: relative; 
    height: 100%; 
    display:block; 
    max-width: 600px; 
    margin-right: auto; 
    margin-left:auto; 
    background-color:red; 
} 
.itamWrapperItem { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

您可以检查出的代码上的代码笔https://codepen.io/codingSober/pen/PjWxJy

Answer 1

我不会撒谎，你的代码是很凌乱，有是没有任何理由的随机HTML标签和CSS规则。

我无法清除了这一切，但这里的一些更新的HTML + CSS，可能是你在找什么：

<ion-view view-title="Live Now" hide-back-button="false"> 
    <ion-nav-buttons side="left"> 
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    <ion-content scroll="false"> 
    <!-- video wrapper --> 
    <div class="videoDiv"> 
     <div class="videoWrapper"> 
      <div class="videoWrapperIframe"> 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/-v2ZDYMu1Rc" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
    <!-- item wrapper --> 
    <div class="itamWrapper"> 
     <ion-scroll delegate-handle="item" direction="y"> 
      <ol class="list"> 
      <li class="item" ng-repeat="item in items"> 
      {{item.id}} 
      </li> 
      </ol> 
     </ion-scroll> 
    </div> 
    </ion-content> 
</ion-view> 

.videoDiv { 
    display:block; 
    max-width: 400px; 
    margin-right: auto; 
    margin-left:auto; 
} 
.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
    background-color:#ededed; 
} 
.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

ion-content { 
    max-height: 100vw; 
} 

ion-scroll { 
    max-width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.itamWrapper { 
    background-color: red; 
}