Pouvez-vous étendre une division à 100 % de la hauteur de la page en utilisant uniquement 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>

Le code HTML qui l'accompagne :

<code class="html">


    <div id="cloud-container"></div>

</code>

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!