One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows:
<body>
<nav> <-- top navigation bar
<ol> <-- breadcrumb trail
<div> <-- row containing buttons
<div class="overflow-auto">
<table> <-- dynamically expanding table
</div>
<footer> <-- sticky footer
</body>
As rows are added to the table at runtime, applying the overflow-auto class becomes necessary by setting a specific value for max-height. Interestingly, using a percentage value results in unrestricted growth instead of creating an overflow effect - only pixel values seem to work effectively.
My ultimate objective is to occupy all available space between the preceding div (buttons row) and the persistent footer, adjusting to various factors such as browser dimensions.
In essence, what I aim for is ensuring that users can always see the footer, prompting the overflow function once the table content reaches this point.
I am unsure whether handling this scenario involves employing particular classes or if manual height calculations will be required.
UPDATE
The challenge escalates when incorporating a sidebar into the equation. Below is the complete code snippet:
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav id="nav_top" class="navbar navbar-expand navbar-dark bg-dark static-top">
<ul class="navbar-nav d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item">
<h5>
<span class="badge badge-secondary">BLABLA</span>
</h5>
</li>
</ul>
</nav>
<div id="wrapper">
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<span>NAV 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">
<span>NAV 2</span>
</a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">Current page</li>
</ol>
<button type="button" class="btn btn-info mb-3">BUTTON</button>
<div id="content" class="row overflow-auto">
<div class="col-12 table-responsive">
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">COL 1</th>
<th scope="col">COL 2</th>
<th scope="col">COL 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
Understanding how the overflow-auto behavior operates within this setup remains unclear. It seems that the presence of row/col divs has an impact on maintaining margins while aiming for the desired result.