it-roy-ru.com

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

У меня есть угловое приложение, которое использует загрузчик 4. У меня есть навигационная панель, которая торчит вверх, и я хочу добавить контент, который заполняет оставшееся пространство в браузере. Помимо навигационной панели вверху, у меня есть еще один div, который сам содержит содержимое верхнего и нижнего колонтитула. Между верхним и нижним колонтитулами у меня есть основной раздел контента, и я хочу, чтобы этот раздел (#two в моем примере ниже) заполнил все пустое пространство. 

Я думал, что мог бы использовать css flexbox для достижения этой цели, но мой простой пример flexbobox без начальной загрузки, похоже, ничего не сделал, когда я перешел в мир начальной загрузки. Я использовал эти документы , чтобы попытаться выяснить это.

Я подумал, что использование align-self-stretch должно помочь в достижении этой цели, но похоже, что содержащиеся в нем элементы могут иметь размер, достаточно большой, чтобы вместить мой контент #outer, так что нет необходимости в расширении flexbox. Я наивно пытался просто добавить стили height:100% к содержащим элементам div, просто чтобы попытаться немного растянуть, но это, похоже, не помогло.

Я создал этот пример плунжера на основе ответа @ ZimSystem. Его пример codeply, казалось, работал точно так, как я хотел, но когда я попытался объединить изменения в моем простом угловом коде, гибкого растяжения не произошло. Я не уверен, что я делаю, чтобы сломать это в преобразовании.

 enter image description here

Это полная угловая составляющая, которую я сейчас просматриваю:

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

Как я могу заставить мой #two расширяться, чтобы заполнить пространство, в то время как мои #one и #three действуют как верхние и нижние колонтитулы содержимого, привязанные к верхней и нижней части области содержимого?

34
Chris Farmer

Обновить 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

30
Zim

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

4
Tigran Petrossian

Проблема при использовании разметки 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';  
    ...
}
3
ConnorsFan

Если вы не можете контролировать поведение класса, который вы используете. Просто удалите все это и используйте только этот 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>

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

.flex-grow {
  flex: 1;
}

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

1
Sara

Вы можете увеличить компонент, чтобы заполнить его контейнер, а затем использовать его в качестве гибкого столбца, чтобы содержимое также увеличивалось. Для этого используйте :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 }']
  })

Я обновил plunk .

0
JayChase

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 Спасибо :)

0
grinmax