My web application has some areas placed in the page. Basically:
<body>
<nav> <-- top nav bar
<ol> <-- breadcrumb
<div> <-- row with buttons
<div class="overflow-auto">
<table> <-- run-time growing table
</div>
<footer> <-- sticky footer
</body>
At run-time my scripts add rows to the table.
To get the overflow-auto class working I have to set a max-height value.
If I set it to 100% it just grows like without overflow. It works if I set a px value only.
My goal, instead, is to fill all the available space (so it depends on the browser, width, etc...) between the previous div (row with buttons) and the sticky footer.
In other words, I want the user always sees the footer so when the table reach it, the overflow feature should begin to work.
I don't understand if this can be easily handled with some specific classes or I have to manually compute the available height (if even possible...).
UPDATE
I cannot manage it to work with a sidebar. Complete code:
<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>
It's not clear to me what affect the overflow-auto behavior. I need the row/col divs in order to keep margins.
