Мое веб-приложение имеет несколько областей, размещенных на странице. В основном:
<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>
Во время выполнения мои скрипты добавляют строки в таблицу. Чтобы заставить работать класс overflow-auto, я должен установить значение max-height. Если я установлю его на 100%, он будет расти как без переполнения. Это работает, если я устанавливаю только значение px.
Моя цель, вместо этого, состоит в том, чтобы заполнить все доступное пространство (таким образом, это зависит от браузера, ширины и т. Д.) Между предыдущим div (строка скнопки) и липкий нижний колонтитул.
Другими словами, я хочу, чтобы пользователь всегда видел нижний колонтитул, поэтому при достижении таблицы функция переполнения должна начать работать.
Не знаюпонять, может ли это быть легко обработано с некоторыми конкретными классами, или я должен вручную вычислить доступную высоту (если даже возможно ...).
ОБНОВЛЕНИЕ
Я не могу управлять этим для работы сбоковая панель. Полный код:
<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>
Мне не ясно, что влияет на поведение overflow-auto . Мне нужны row / col div для того, чтобы сохранить поля.