Bootstrap - Как создать полноэкранный макет с прокручиваемыми столбцами? - PullRequest
Новая
       19

Bootstrap - Как создать полноэкранный макет с прокручиваемыми столбцами?

0 голосов
/ 22 декабря 2018

Я пытаюсь создать полноэкранный макет, который занимает 100% области просмотра с липким верхним и нижним колонтитулами, а также прокручиваемые по отдельности столбцы в основной области содержимого.

Я экспериментировал с использованием.h-100 и .flex-grow-1 в разных строках и столбцах, но я не могу заставить его работать.Самое близкое, что я получил, - это добавление h-100 в контейнер и средний ряд, но это отталкивает нижний колонтитул от нижней части экрана. 

<body>
<div class="container-fluid h-100">
    <div class="row">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">Article list </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row">
        <div class="col-12 border">Footer </div>
    </div>
</div>
</body>

Я могу заставить его работать только содин столбец, но добавление более 1 столбца нарушает компоновку способом, который я не понимаю.

1 Ответ

0 голосов
/ 22 декабря 2018

Создайте контейнер d-flex, а затем используйте flex-grow-1, чтобы область содержимого заполнила высоту.Вы также можете использовать flex-shrink-0 на панели навигации и в нижнем колонтитуле, чтобы они не сжимались по высоте. 

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

Демо: https://www.codeply.com/go/ouc3hddx5i

:
Используйте оставшееся вертикальное пространство с Bootstrap 4
Bootstrap 4.0 - отзывчивый заголовок с изображением + navbar + полный рост тела

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...