Comment puis-je faire en sorte qu'une ligne Flexbox remplisse l'espace vertical restant dans une fenêtre de navigateur ?

Faire en sorte que votre disposition Flexbox consomme l'espace vertical restant

La troisième rangée d'une disposition Flexbox doit s'étendre dynamiquement pour remplir la hauteur restante de la fenêtre du navigateur. Pour y parvenir, suivez les étapes suivantes :

1. Définissez la hauteur du code HTML, du corps et du conteneur flexbox parent (.wrapper) sur 100 % pour hériter de la hauteur totale du parent.
2. Appliquez une valeur de flexion supérieure à 1 à la troisième ligne (.row3) uniquement, en laissant les autres lignes avec leurs hauteurs d'origine. Cela donnera à .row3 la possibilité de croître.
3. Ajoutez le code suivant dans la classe .wrapper pour vous assurer que les colonnes reconnaissent la hauteur complète du navigateur :

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!