Как использовать Bootstrap 4 flexbox для заполнения доступного содержимого?

У меня есть приложение 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 действуют как верхние и нижние колонтитулы содержимого, привязанные к верхней и нижней части области содержимого?

Ответы

Ответ 1

Обновление Bootstrap 4.1.0

Классы flex-grow-1 и flex-fill включены в Bootstrap 4.1.0

Обновление Bootstrap 4.0.0

Добавьте класс flex-grow следующим образом:

.flex-grow {
    flex: 1 0 auto;
}

Затем служебные классы можно использовать для остальной части макета:

 <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">Item 1</a></li>
        </ul>
    </nav>
    <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 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

Вот еще один пример с Bootstrap 4.3.1, который имеет панель навигации, боковую панель и нижний колонтитул с областью прокрутки содержимого:https://www.codeply.com/go/LIaOWljJm8

Ответ 2

Ваш компонент обернут в элемент <flex>, который нуждается в том же стиле flexbox, чтобы растягиваться и по вертикали, что позволяет растягивать его содержимое вместе с ним. Таким образом, добавление class="d-flex flex-column flex-grow" к <flex> будет работать. Вот рабочий пример вашего примера с плунжером.

Ответ 3

Проблема при использовании разметки ZimSystem в вашем Angular plunker заключается в том, что компонент вставляется в визуализированный HTML как дополнительный контейнер с тегом flex:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        ...
    </nav>
    <router-outlet></router-outlet>
    <flex>
        <div id="outer" class="d-flex flex-column flex-grow">
            ...
        </div>
    </flex>
</div>

Чтобы заставить его работать должным образом, вы можете удалить внешний div из компонента и установить классы flex в хост-контейнере компонента, как показано в этом модифицированном элементе.

import {Component, NgModule, HostBinding, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
    selector: 'flex',
    template: '
        <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>
    '
})
export class FlexComponent {
    @HostBinding('class') classes = 'd-flex flex-column flex-grow';  
    ...
}

Ответ 4

Если вы не можете контролировать поведение класса, который используете. Просто удалите все это и используйте только этот css.

html,
body,
flex {
  height: 100%;
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.two {
  background-color: #123;
  flex-grow: 1;
  color: #FFF;
}

<flex>
  <div class="outer">
    <div class="one">
      Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
    </div>
    <div class="two">
      Hey. This is body
    </div>
    <div class="three">
      Hey. This is footer <br> Hey. This is footer <br>
    </div>
  </div>
</flex>

Ответ 5

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-grow {
  flex: 1;
}

Добавьте компонент-оболочку, содержащий ваши блоки контента, и примените класс flex-grow к тому, который вы хотите заполнить оставшимся пространством.

Ответ 6

CSS

html, body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

flex.components.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'flex',
  host: {'class': 'flex-grow'},
  template: `

<div id="outer" class="d-flex flex-column h-100 flex-grow">
  <div id="one" class="">
    header content
    <br> another line
    <br> And another
  </div>
  <div id="two" class="bg-info flex-grow">
    main content that I want to expand to cover remaining available height
  </div>
  <div id="three" class="">
    footer content
  </div>
</div>        

  ` 
})
export class FlexComponent {
  constructor() {}
}

Результат - https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview Спасибо:)

Ответ 7

Вы можете увеличить компонент, чтобы заполнить его контейнер, а затем использовать его в качестве гибкого столбца, чтобы содержимое также увеличивалось. Для этого используйте :host для нацеливания на элемент компонента.

flex.component.ts

  @Component({
    selector: 'flex',
    template: '

  <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>        

    ',
    styles: [':host {flex: 1 0 auto; display: flex; flex-direction: column }']
  })

Я обновил планку.