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

Question

我正在尝试将 IONIC 页面分成 2 个垂直部分。第一部分包含响应式 YouTube iframe，第二部分包含项目列表。这 2 个 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;
}