Я создаю веб-сайт, используя Bootstrap 4, состоящий из панели навигации и нижнего колонтитула с фиксированной высотой и 2 столбцами между ними. Столбцы будут содержать данные (таблицы, формы), которые иногда будут переполняться и должны вызывать прокрутку столбцов. Я застрял в попытке заставить столбцы занимать как можно больше вертикального пространства, не заставляя весь сайт занимать более 100% вертикального пространства.
Сейчас у меня это:
<body class="justify-content-center pt-3 pb-5">
<div class="bg-light w-75 h-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/suche"> <img
src="/ic_launcher-web.png" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
</nav>
<div class="row pt-3 flex-grow-1">
<div class="col">
<h4>Column 1</h4>
</div>
<div class="col d-flex flex-column">
<h4>Column 2</h4>
<div class="overflow-auto">
<table class="table">
<tbody>
<tr>
<td class="w-25"><h3>Head1</h3></td>
<td class="w-75"><h3>Head2</h3></td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
</tr>
...
<tr>
<td>Test39</td>
<td>Test40</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-light bg-dark">
<span class="navbar-text"> © 2020 </span>
</nav>
</body>
body {
height: 100%;
background-color : yellow;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
Таблица в правом столбце растет за пределы своего родительского контейнера вместо того, чтобы становиться прокручиваемой, в результате чего вся веб-страница становится больше, чем представление, и прокручивается: вот скриншот .
Все работает, если я устанавливаю родительский div таблицы на фиксированную высоту в пикселях, но я бы хотел, чтобы он заполнил все оставшееся вертикальное пространство без установки фиксированных значений. Что я делаю не так? Я не очень разбираюсь в html и bootstrap, но считаю, что это может быть легко исправить для кого-то с опытом.
Отредактируйте, чтобы добавить снимок экрана, как я хочу, чтобы он выглядел: здесь Здесь я установил высоту родительского div (с class = "overflow-auto") на 420 пикселей. Обратите внимание на то, что прокручивается только таблица и не выходит за пределы белой области (родительский div), текст «Столбец 2» и все вокруг всегда находится в одном месте.