How can I ensure that the page layout does not allow scrolling for the entire page height (100vh), but allows scrolling within a table if necessary? The header and footer should remain fixed at the top and bottom of the page respectively, unaffected by the content of the table. Even if the table content exceeds the available vertical space, the footer should not get pushed down but instead provide scrolling within the table.
The current setup consists of a root div with a Bootstrap4 navbar, followed by a page_container utilizing a grid layout for its internal sections: header, content, footer.
Here is a JSFiddle link to a layout with a table that stays within the page height: https://jsfiddle.net/kvdyg4q5/
And here is another JSFiddle link to a layout with a table that exceeds the page height: https://jsfiddle.net/1nv7hqg6/
In the second example, you can see that the table pushes the footer down, which is the issue that needs to be addressed.
CSS Styles Used:
<style type="text/css">
#root {
height: 100%;
min-height: 100vh;
max-height: 100vh;
}
.page_container {
max-height: calc(100vh - 70px);
height: calc(100vh - 70px);
min-height: calc(100vh - 70px);
}
.table_container {
display: grid;
height: 100%;
grid-template-rows: auto 1fr auto;
}
.table_body {
display: block;
height: 100%;
overflow-y: scroll;
}
</style>
HTML Structure:
<body>
<div id="root">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="#">Company</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar1</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar2</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar3</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar4</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar5</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar6</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar7</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar8</a></li>
</ul>
</div>
</nav>
<div style="padding: 6px;">
<div class="page_container">
<div class="table_container">
<div>
<h1>HEADER</h1>
</div>
<div>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col"> Column 4 </th>
<th scope="col">Column 5</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<!-- more rows...-->
</tbody>
</table>
</div>
</div>
<div>
<h2>Footer</h2>
</div>
</div>
</div>
</div>
</div>