Comment puis-je faire en sorte qu'une mise en page Flexbox remplisse l'intégralité de l'espace vertical de la fenêtre du navigateur ?

Créer une disposition Flexbox pour remplir tout l'espace vertical

Une disposition flexbox peut être configurée pour consommer l'espace vertical restant dans une fenêtre de navigateur en définissant la propriété flex du ligne de mise en page en conséquence.

Pour y parvenir :

1. Définissez la hauteur du code HTML, du corps et le wrapper flexbox à 100 % pour hériter de toute la hauteur.
2. Attribuez une valeur de flexion supérieure à 1 à la ligne de mise en page qui doit s'étendre pour remplir la hauteur, tout en laissant les autres lignes avec leurs hauteurs d'origine.

Voici un exemple :

.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; /* Set flex value greater than 1 */
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

Cette approche garantit que la mise en page est alignée verticalement, avec la troisième rangée s'agrandissant pour remplir l'espace restant. La propriété min-height sur les colonnes est utilisée pour garantir qu'elles héritent de toute la hauteur de la troisième ligne.

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!