Maison > interface Web > tutoriel CSS > le corps du texte

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

Linda Hamilton
Libérer: 2024-10-31 15:25:02
original
766 Les gens l'ont consulté

How to Make a CSS Div Stretch to 100% of the Page Height Without 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!