Bootstrap 4: Comment faire de la ligne tronçon restant de la hauteur?

Je suis en train de faire la container-fluid et 2ème row de s'étirer pour le reste de la hauteur, mais je ne pouvais pas trouver un moyen de le faire.

J'ai essayé le réglage de la align-items/align-self à stretch mais ne fonctionne pas non plus.

Ci-dessous mon code de la structure:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row"> <!-- I want this row height to filled the remaining height -->
        <widgets [widgets]="widgets" class="hing"></widgets>
        <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
            <template row-host></template>
        </div>
    </div>
</div>

Je suis en utilisant Bootstrap 4 A6. Quelqu'un pourrait-il me suggérer comment le récipient et la ligne d'étirer le reste de la hauteur?

OriginalL'auteur user3130446 | 2017-02-13

  1. 22

    Bootstrap 4.1.0 dispose d'une classe utilitaire pour flex-grow qui il ce dont vous avez besoin pour la ligne à remplir le reste de la hauteur. Vous pouvez ajouter un "remplissage" de la classe pour cette. Vous aussi, vous devez assurez-vous que le récipient est plein de hauteur.

    Le nom de la classe dans le Bootstrap 4.1 est flex-grow-1

    html,body{
    height:100%;
}

.flex-fill {
    flex:1;
}

<div class="container-fluid d-flex h-100 flex-column">
    <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row bg-light flex-fill d-flex justify-content-start">
        <!-- I want this row height to filled the remaining height -->
        <div class="col portlet-container portlet-dropzone">
            <!-- if row is not the right to stretch the remaining height, this column also fine -->
            Content
        </div>
    </div>
</div>

    https://www.codeply.com/go/kIivt8N1rn

    Connexes: Bootstrap 4 lignes imbriquées remplir parent qui a été fait pour combler fenêtre d'affichage de la hauteur à l'aide de flex-grow

    Juste une question, pourquoi aurions-nous besoin align-items-stretch align-content-stretch les deux ici?
    En fait ni l'un est nécessaire

    OriginalL'auteur Zim