I am working on optimizing my result pages for mobile devices to ensure they are responsive across all screen sizes. However, I am struggling with making the scrollable panel fill the screen down to the footer consistently on all mobile devices. Setting a fixed height using pixels or viewport units doesn't provide a responsive solution, and using a percentage value prevents the panel from being scrollable. Any suggestions on how to achieve this?
Below is the code snippet:
CSS
.list_mobile {
.result {
height: border-box;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 5vh;
background: skyblue;
color: black;
}
}
.res_mobile {
height: 57vh;
overflow: scroll;
overflow-x: hidden;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<span>Results</span>
</h4>
</div>
<div class="panel-collapse collapse in">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row list_mobile">
<footer class="footer">
<p>Number of results: 55 </p>
</footer>
</div>