У меня есть приложение angular, которое использует bootstrap 4. У меня есть панель навигации, которая придерживается вершины, и я хочу добавить контент, заполняющий оставшееся пространство в браузере. Помимо навигационной панели наверху, у меня есть еще один div, который сам содержит содержимое заголовка и нижнего колонтитула. Между верхним и нижним колонтитулом у меня есть раздел основного контента, и я хочу, чтобы этот раздел (#two
в моем примере ниже) заполнил все пустое пространство.
Я думал, что смогу использовать css flexbox, чтобы выполнить это, но мой простой пример не-bootstrap flexbox, казалось, ничего не делал, когда я перешел в мир bootstrap. Я использовал эти документы, чтобы попытаться понять это.
Я думал, что использование align-self-stretch
должно помочь в достижении этой цели, но похоже, что содержащиеся элементы могут быть сами по себе достаточно большими, чтобы содержать мой контент #outer
, поэтому нет расширения flexbox. Я попытался наивно просто добавить стили height:100%
к содержащим divs, чтобы попытаться получить растягивание, но это, похоже, не помогло.
Я создал этот пример plunker на основе ответа @ZimSystem. Его простой пример, казалось, работал точно так, как я хотел, но когда я попытался скомпоновать изменения в мой простой код angular, растяжения гибкого диска не произошло. Я не уверен, что я делаю, чтобы разбить его на конверсию.
Это весь компонент angular, который я просматриваю на данный момент:
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content <br>
another line <br>
And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
</div>
И здесь контейнер приложения, показывающий навигационную точку и точку впрыска:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
Как я могу получить div #two
для расширения, чтобы заполнить пробел, когда мои div #one
и #three
действуют как верхние и нижние колонтитулы содержимого, привязанные к верхней и нижней части области содержимого?