Css 将爱奥尼亚页面分成两个垂直部分，使第二部分可滚动并限制高度

我试图将一个爱奥尼亚页面分成两个垂直部分。第一部分包含一个响应的YouTube iframe，第二部分包含一个项目列表。这两个div的高度之和应为页面的总高度

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

HTML

您可以在代码笔上查看代码

---

我不会撒谎，你的代码非常凌乱，里面毫无理由地有随机的html标记和css规则

我无法将其全部清理干净，但这里有一些更新的html+css，可能正是您想要的：

{{item.id}

.videoDiv{
显示：块；
最大宽度：400px；
右边距：自动；
左边距：自动；
}
.视频包装器{
位置：相对位置；
填充底部：56.25%；/*16:9*/
填充顶部：25px；
身高：0；
背景色：#ededed；
}
.videoWrapper-iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
离子含量{
最大高度：100vw；
}
离子涡旋{
最大宽度：600px；
右边距：自动；
左边距：自动；
}
itamWrapper先生{
背景色：红色；
}

谢谢，但这并不能解决问题！它与以前一样，在items div中没有滚动！

<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>

.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%;
}