Comment étendre une division CSS à 100 % de la hauteur de la page sans JavaScript ?

Comment étirer une division CSS à 100 % de la hauteur de la page

Dans le monde de la conception Web, il est souvent souhaitable d'avoir des éléments qui s'étendent sur toute la hauteur de la page, y compris les zones cachées accessibles par défilement. Ceci est particulièrement utile pour créer des barres latérales, des en-têtes et des pieds de page.

Pour obtenir cet effet sans recourir à JavaScript, explorons une solution CSS.

Solution CSS

La clé pour étirer un div à 100 % de la hauteur de la page réside dans la compréhension de la relation entre les éléments HTML et body. Voici le code :

<code class="css">html {
    min-height: 100%; /* Ensure HTML is at least as tall as the viewport */
    position: relative; /* Make HTML box layout reference for divs */
}

body {
    height: 100%; /* Force BODY to match HTML height */
}

#my-div {
    position: absolute; /* Take div out of document flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* Hide overflow for aesthetic purposes */
    z-index: -1; /* Remove this line for non-background uses */
}</code>

Explication

• html : Nous définissons la hauteur minimale de l'élément HTML pour nous assurer qu'il est à au moins aussi haut que la fenêtre. La position : relative ; fait de la boîte HTML la référence pour les divs.
• body : Nous forçons l'élément body à correspondre à la hauteur de l'élément HTML. Cela garantit que la page entière s'étend sur toute la hauteur.
• #my-div: En utilisant position: absolue;, nous supprimons le div du flux de documents et le positionnons de manière absolue en utilisant haut, bas , propriétés gauche et droite. Le débordement : caché ; empêche le débordement de déborder hors du div.

En suivant cette approche, vous pouvez facilement créer un div CSS qui s'étend sur toute la hauteur de la page, vous offrant ainsi une plus grande flexibilité dans votre conception Web.

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!