Comment utiliser Bootstrap 4 flexbox pour remplir le contenu disponible?

Question

J'ai angulaire application qui utilise bootstrap 4. J'ai une barre de navigation qui colle vers le haut, et je tiens à ajouter du contenu qui remplit l'espace restant dans le navigateur. En dehors de la barre de navigation en haut, j'ai une autre div qui contient lui-même en-tête et pied de page de contenu. Entre l'en-tête et pied de page, j'ai une section de contenu principal, et je veux que cette section (#two dans mon exemple ci-dessous) pour remplir tout l'espace vide.

Je pensais que je pouvais utiliser css flexbox pour accomplir cela, mais mon simple non-bootstrap flexbox exemple semblait ne rien faire lorsque j'ai emménagé dans le bootstrap monde. J'ai été en utilisant ces docs à essayer de comprendre cela.

J'ai pensé à l'aide de align-self-stretch devrait contribuer à l'atteinte de cet objectif, mais il sorte de ressemble à l'contenant des éléments de dimensionnement eux-mêmes juste assez grand pour contenir mon #outer de contenu, donc il n'y a pas de flexbox expansion à faire. J'ai essayé naïvement simplement l'ajout d' height:100% styles à l'contenant des divs juste pour essayer d'obtenir quelques étirements, mais cela ne semble pas aider.

J'ai créé ce plunker exemple basé sur @ZimSystem de réponse. Son codeply exemple semblait fonctionner exactement comme je le voulais, mais quand j'ai essayé de la pièce, les changements dans mon simple angulaire de code, le flex de l'étirement n'est pas arrivé. Je ne suis pas sûr de ce que je suis en train de faire casser la conversion.

C'est la totalité de l'angle de composant je suis visualisation à l'instant:

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

Et voici le conteneur de l'application montrant la barre de navigation et le point d'injection:

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

Comment puis-je obtenir mon #two div à développer pour remplir l'espace tout en ayant mon #one et #three divs agissant en tant que contenu des en-têtes et pieds de page ancré en haut et en bas de la zone de contenu?

Answer 1

Mise À Jour De Bootstrap 4.1.0

L' flex-grow-1 et flex-fill cours sont inclus dans le Bootstrap 4.1.0

Mise À Jour De Bootstrap 4.0.0

Ajouter un flex-grow de la classe comme ceci:

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

Ensuite, les classes d'utilitaire peut être utilisé pour le reste de la mise en page:

 <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

Answer 2

Votre composant est encapsulé dans un élément <flex> qui requiert le même style de flexbox pour s’étirer verticalement, ce qui permet à son contenu de s’étirer avec. Donc, ajouter class="d-flex flex-column flex-grow" au <flex> fonctionnera. Voici un fork de votre exemple de plongeur .

Answer 3

Le problème, lors de l'utilisation de ZimSystem de balise dans votre Angulaire plunker, c'est que le composant est inséré dans le rendu HTML comme un conteneur supplémentaire avec l' flex balise:

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

Afin de le faire fonctionner comme prévu, vous pouvez supprimer la div extérieure du composant et définir les classes flex sur le composant hôte du conteneur, comme le montre cette modification plunker.

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';  
    ...
}

Answer 4

Si vous ne pouvez pas contrôler le comportement de la classe que vous utilisez. Il suffit de tout enlever et d’utiliser ce css uniquement.

 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> 

Answer 5

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

.flex-grow {
  flex: 1;
}
 

Ajoutez un composant wrapper contenant vos blocs de contenu et appliquez la classe flex-grow à celle dont vous souhaitez remplir l'espace restant.