Maison > Article > interface Web > Comment étendre une division CSS à 100 % de la hauteur de la page sans JavaScript ?

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

Linda Hamiltonoriginal: 2024-10-31 06:32:30137parcourir

How to Stretch a CSS Div to 100% Page Height Without JavaScript?

Étendre une division CSS à 100 % de la hauteur de la page sans JavaScript

Améliorer l'expérience utilisateur d'un site Web implique de s'assurer que les éléments de la page se comportent comme prévu . Une exigence courante est que les barres de navigation ou d'autres éléments s'étirent verticalement pour remplir toute la hauteur de la page, quelle que soit la taille de la fenêtre d'affichage ou le défilement. Bien que JavaScript puisse y parvenir, une solution purement HTML/CSS offre des avantages tels que la flexibilité et la facilité de mise en œuvre.

Solution :

Après avoir expérimenté diverses approches, les éléments suivants La structure CSS et HTML est apparue comme la solution optimale pour étirer un DIV à 100 % de la hauteur de la page :

<code class="css">/* Ensure the HTML element stretches to the full page height */
html {
    min-height: 100%;
    position: relative;
}

/* Force the body element to match the HTML element's height */
body {
    height: 100%;
}

/* Position the DIV container absolutely and stretch it to all sides */
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Only applies to background elements */
}</code>

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

Explication :

L'élément html est créé la référence pour les mesures et positionné de manière relative, ce qui empêche ses éléments enfants d'être supprimés de sa mise en page. La hauteur de l'élément body est définie sur 100 %, garantissant qu'elle correspond à la hauteur de l'élément html.

Le positionnement absolu de la DIV #cloud-container, combiné à son haut/bas/gauche/droite défini sur 0, garantit il occupe tout l'espace disponible. La propriété overflow: Hidden empêche le contenu de déborder du conteneur.

Justification :

En positionnant la DIV #cloud-container en tant qu'enfant de l'élément html et en utilisant la position : propriété relative sur l'élément html, elle est garantie d'occuper toute la hauteur de la page, même lorsque le contenu est plus long que la viewport. Cette approche est robuste et largement compatible sur différents navigateurs.

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!

JavaScript css html for while using Property this position overflow viewport

Déclaration：

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

Article précédent：Comment ajouter des coins arrondis aux lignes d’un tableau en HTML ?Article suivant：Comment ajouter des coins arrondis aux lignes d’un tableau en HTML ?

Articles Liés

Voir plus