简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

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
747 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!

source：php.cn
Article précédent：Comment importer des fichiers CSS dans des fichiers LESS ? Article suivant：Largeur : Auto vs Largeur : 100 % – Quand devez-vous utiliser lequel ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1710
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1874
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1586
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1504
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1541
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！