Comment étendre une division CSS à 100 % de la hauteur de la page sans JavaScript ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-10-31 06:32:30

original

160 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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