Comment créer une étendue de division à 100 % de la hauteur de la page en utilisant uniquement CSS ?

Comment étirer une division à 100 % de la hauteur d'une page sans JavaScript

Lors de la conception d'une page Web, il est courant de vouloir créer une barre de navigation ou tout autre élément qui s'étend sur toute la hauteur de la page, pas seulement la zone visible de la fenêtre. Pour y parvenir, explorons une solution CSS pure.

Solution CSS :

html {
    min-height: 100%; /* Ensure it's as tall as the viewport */
    position: relative;
}
body {
    height: 100%; /* Force body to match HTML's height */
}
#navigation-bar {
    position: absolute;
    top: 0; /* Top edge of the page */
    bottom: 0; /* Bottom edge of the page */
    left: 0; /* Left edge of the page */
    right: 0; /* Right edge of the page */
}

Ce CSS positionne l'élément de la barre de navigation absolument dans la fenêtre, garantissant qu'il remplit toute la hauteur de la page sans limitations de défilement.

Explication :

• html définit une hauteur minimale à 100 % pour correspondre à la fenêtre d'affichage . Cela empêche le div d'être tronqué.
• body définit la hauteur à 100 % pour la forcer à correspondre à la hauteur de l'élément HTML.
• position : absolue supprime le div du flux normal de documents, lui permettant d'être positionné dans la fenêtre d'affichage.
• haut : 0 et bas : 0 étendent le div au maximum hauteur de la page.

Remarques supplémentaires :

• Pour une colonne pleine hauteur, supprimez gauche ou à droite dans le sélecteur de #navigation-bar.
• Pour une ligne pleine largeur, supprimez haut ou bas.
• Si le div n'est pas destiné comme arrière-plan, supprimez z-index: -1; du sélecteur.

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!