У меня есть приложение Angular, которое использует bootstrap для создания приведенного ниже (упрощенная структура).
<div class="container">
<div class="header>
<div class="mat-card>
<!-- Header stuff -->
</div>
</div>
<div class="row">
<div class="col-8">
<div class="mat-card>
<!-- Table goes here -->
</div>
</div>
<div class="col-4>
<div class="mat-card>
<!-- Other stuff -->
</div>
</div>
</div>
</div>
Столбец col-8, присутствующий в структуре, будет содержать mat-card, которая будет содержать таблицу с переменным количеством строк. Это означает, что если таблица содержит большое количество строк, таблица может быть слишком большой для страницы и, возможно, выпадет за пределы экрана, заставляя пользователя прокручивать для просмотра всей таблицы.
Я хочу, чтобы столбец col-8 мог использовать только пространство, необходимое для отображения таблицы, и не более, однако я хочу, чтобы столбец расширялся вместе со столбцом. Таким образом, таблица из 5 строк заставит col-8 использовать меньше места, чем таблица из 10 строк.
Однако я также хочу иметь возможность навязать максимальную высоту столбцу col-8, чтобы столбец становился таким же высоким, как оставшееся вертикальное пространство на странице, а максимальная высота столбца-8 следовательно, должно быть browser window - the height of the header
Итак, для подведения итогов.
col-8 содержит таблицу с переменной высотой col-8 высота должна увеличиваться в соответствии с высотой таблицы col-8 высота не должна превышать высоту окна браузера
Я могу сделать именно то, что хочу, установив для столбца значения height: vh и overflow-y: scroll, однако это означает, что столбец будет иметь фиксированную высоту и не будет реагировать, поэтому, хотя он и близко, это не полное решение.