Ionicページを2つの垂直セクションに分割し、2番目のセクションをスクロール可能にして高さを制限します。

Question

IONICページを2つの垂直セクションに分割しようとしています。最初のセクションには応答するYouTubeのiframeが保存され、2番目のセクションにはアイテムのリストが保存されます。これら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; 
}