Check out this Codepen example for reference: https://codepen.io/anthonyhvelazquez/pen/oNjPrgQ
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-3">
<div class="content h-100" style="background: red">
Left Side Navigation
</div>
</div>
<div class="col-md-9">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Sheet Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have a layout with a left-side navigation panel and a table on the right. However, I'm looking to ensure that the container stays within specific height parameters regardless of the content inside it.
The goal is to keep the container's height as (screen height - navbar height) at all times, even if the content overflows.
The table should expand to fill the container, even if its content is insufficient to do so.
If the table exceeds the container's limit, there should be a vertical scroll with sticky table headers at the top.
Any suggestions on achieving this outcome or implementing a more responsive design approach?