I'm currently utilizing Bootstrap 4 and have a rather intricate footer:
https://i.sstatic.net/QGbeO.png
...that dynamically adjusts its height. Since this is a PHP application, the content in the center of the screen is subject to change. When the content exceeds the screen size, it correctly pushes the footer to the bottom. However, there are instances where the content is minimal, resulting in whitespace below the footer.
There's also a header in place.
Is there a way to use CSS to modify the Bootstrap classes so that if, and only if, the combined height of the content and footer doesn't fill 100% of the viewport height, the content expands accordingly?
Here's how it currently appears:
https://i.sstatic.net/s5vAl.png
As visible, there's space at the bottom of the screen below the footer. My intention isn't to create a sticky footer or enable scrolling in the middle; I simply want the footer to sit at the bottom of the screen when the content between the header and footer doesn't consume the remaining height.
Everything I've come across thus far involves setting a fixed height for the footer, but I'm concerned about its responsiveness across different screen sizes.
Below is my basic HTML layout with Bootstrap classes:
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
...
</footer>
</body>
This is the customized CSS I applied to the page:
html,
body,
header {
height: 100%;
}
body {
padding-top: 70px;
}
Any guidance on tackling this issue would be highly appreciated.
Thank you.