Как в Bootstrap 4.3.1 растянуть колонку по высоте до конца страницы чтобы не появлялась полоса прокрутки?

Question

[html_newbie]

Не могу понять как сделать так чтобы высота container/container-fluid была до конца страницы. Везде примеры с параметром h-100, но при этом если на странице есть navbar то появляется полоса прокрутки, а мне нужно чтобы сайт занимал целиком всю страницу (без перемотки).
Вот пример с полосой прокрутки https://www.bootply.com/FnNESweGGj

UPD: пожалуйста, не предлагайте вычитать из высоты 56.
Поскольку сегодня высота navbar = 56, а завтра 60 или 80, а после завтра я захочу добавить хедер или футер для страницы. Использование магических чисел в программировании является плохой практикой https://ru.wikipedia.org/wiki/Магическое_число_(пр...

Answer 1

[origami1024]

1) для body задать (либо положить navbar и container в родителя):

display: flex;
flex-direction: column;
height:100vh;
margin: 0;
padding: 0;

2) container`у задать flex:1 - чтобы он занимал всё место, что остается
https://codepen.io/origami1024/pen/eYOLeXg

Comments

[html_newbie]

Спасибо.

Answer 2

[Антон Неверов]

Используйте функцию свойства - calc(). 100% минус высота navbar. Так же, можно использовать не %, а 100vh - что всегда равно 100% высоты экрана.

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

<div class="container-fluid d-flex flex-column" style="height: calc(100% - 56px)">
    <div class="row bg-light flex-fill d-flex justify-content-start">
        <div class="col-4 bg-secondary">
            Content
        </div>
        <div class="col-8 bg-success">
            Content
        </div>
    </div>
</div>

Comments

[html_newbie]

Спасибо за ответ, но ваш вариант не подходит по объективным причинам: сегодня высота navbar 56, а завтра 60 или 80, а после завтра я захочу добавить хедер или футер для страницы. Использование магических чисел в программировании является плохой практикой https://ru.wikipedia.org/wiki/Магическое_число_(пр...

[Антон Неверов]

Мы не о программировании говорим, а о вёрстке.

Если у вас хедер меняется с динамикой каждую минуту - то, конечно.
Хедеры и футеры, обычно, фиксированы в вёрстке. Если же они меняются - то под них меняют новые свойства, уникального решения, которое бы подстраивало высоту контента динамично в CSS нет. Используйте JavaScript.

[Антон Неверов]

Вот вам пример того, как предлагают делать фиксированный футер: https://getbootstrap.com/docs/4.0/examples/sticky-... - не поверите, используют магические константы.
На секундочку, сам Bootstrap это и рекомендует.