I am facing an issue with my modal setup. The content in the body is quite lengthy and I want it to be scrollable, but the height of the body should end where the footer begins.
Currently, the height of the body extends over the footer, making it impossible to view the content at the bottom.
Since I do not know the height of the device, how can I make the body dynamic so that it fits between the header and footer, allowing for seamless scrolling and visibility of all elements?
PS: The height of the header can vary, but the height of the footer can be specified.
https://i.sstatic.net/hkrK9.jpg
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>