Pouvez-vous étendre une division à 100 % de la hauteur de la page en utilisant uniquement CSS ?-tutoriel CSS-php.cn

Pouvez-vous étendre une division à 100 % de la hauteur de la page en utilisant uniquement CSS ?

Barbara Streisand

Libérer： 2024-10-30 23:48:29

original

855 Les gens l'ont consulté

Can You Stretch a Div to 100% Page Height Using Only CSS?

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

Améliorer l'esthétique et la fonctionnalité d'une page Web implique souvent d'aligner les éléments avec précision pour occuper des parties spécifiques de la page. Une exigence courante consiste à étendre un menu de navigation ou une barre latérale pour qu'il s'étende sur toute la hauteur de la fenêtre d'affichage, s'étendant au-delà de la zone visible lors du défilement.

Est-il possible de le faire sans Javascript ?

La question de savoir si une telle fonctionnalité peut être réalisée uniquement en utilisant HTML et CSS a été soulevée par les développeurs. La réponse est un oui catégorique.

La solution

Pour résoudre ce problème, envisagez les modifications CSS suivantes :

Supprimez z- index pour permettre au div d'être étiré.
Omettez la gauche ou la droite pour une colonne pleine hauteur.
Excluez le haut ou le bas pour une ligne pleine largeur.

Voici un exemple de code CSS qui illustre la solution :

<code class="css">html {
    min-height: 100%; /* ensures minimum viewport height */
    position: relative;
}
body {
    height: 100%; /* matches the height of the HTML element */
}
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}</code>

Copier après la connexion

Le code HTML qui l'accompagne :

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

Copier après la connexion

La justification

Le html {hauteur min : 100 % ; La déclaration position: relative;} garantit que le div du conteneur cloud reste dans la mise en page HTML, permettant des calculs de hauteur précis.

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!