É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 :
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"><!doctype html> <html> <body> <div id="cloud-container"></div> </body> </html></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!