I am facing an issue with a div that contains three tabs and a footer. If the content of one tab is shorter than the viewport height, it leaves a blank space below the footer. Here's an example of one tab working correctly.
This is what happens when I switch to another tab
I want the div to extend all the way to the bottom of the page, but I can't seem to figure out how to achieve this.
Below is the code snippet I am using:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body style="padding-top: 3.5rem;">
<navbar>
Navbar
</navbar>
<div class="container" style="width:100%;display:block;overflow:auto;">
Tabs and everything else
</div>
<footer class="py-5 bg-dark" style="position: relative;bottom: 0;width: 100%;">
Footer
</footer>
</body>
</html>
Just for reference, I am using Bootstrap 4