@html_newbie

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

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

UPD: пожалуйста, не предлагайте вычитать из высоты 56.
Поскольку сегодня высота navbar = 56, а завтра 60 или 80, а после завтра я захочу добавить хедер или футер для страницы. Использование магических чисел в программировании является плохой практикой https://ru.wikipedia.org/wiki/Магическое_число_(пр...
  • Вопрос задан
  • 4051 просмотр
Решения вопроса 1
origami1024
@origami1024
went out for a night walk
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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
Используйте функцию свойства - 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы