In my IONIC project, I'm working on dividing a page into two vertical sections. The first section features a responsive YouTube iframe while the second section contains a list of items. Together, these two divs should fill up the total height of the page.
I've successfully made the YouTube video iframe responsive, but now I'm facing an issue with adjusting the height of the items DIV to occupy the remaining space in the ion-content (the view page). I've tried various solutions without any luck! Is there a way to dynamically calculate and adjust the height of the items DIV so it becomes scrollable? It scrolls perfectly when the height is specified explicitly, but not when left undefined. Any suggestions or help would be greatly appreciated. Thank you.
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="itemWrapper">
<div class="itemWrapperItem">
<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%;
}
.itemWrapper {
position: relative;
height: 100%;
display:block;
max-width: 600px;
margin-right: auto;
margin-left:auto;
background-color:red;
}
.itemWrapperItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can find the code on Code Pen at https://codepen.io/codingSober/pen/PjWxJy