Codepen Example: 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 am trying to create a page that has a left navigation panel and a table on the right side. Now that I have that setup, I want to modify my table so that it doesnt force my container to grow past a certain height.
Specifically I want the container to be (the height of the screen - the navbar) at all times whether the content under or overfills the container.
The table show grow to the size of the container even if the table contents are not enough to fill in the height
Once the table surpasses the limit of the container, it should have a vertical scroll with sticky table headers at the top
Any advice on how to get this outcome or is there a more responsive approach?