简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment manipuler la hauteur : 100 % en CSS pour que cela fonctionne

Comment manipuler la hauteur : 100 % en CSS pour que cela fonctionne

巴扎黑
巴扎黑original
2017-06-28 10:02:101563parcourir

Lorsque vous définissez la hauteur d'un élément de page à 100 %, vous vous attendez à ce que l'élément remplisse toute la hauteur de la fenêtre du navigateur, mais dans la plupart des cas, cette approche n'a aucun effet. Savez-vous pourquoi height:100% ne fonctionne pas ?

Selon le bon sens, lorsque nous utilisons l'attribut CSS height pour définir la hauteur d'un élément, cet élément doit étendre la distance spatiale correspondante dans l'espace vertical du navigateur comme défini. Par exemple, si le CSS d'un élément p est height: 100px;, alors il doit occuper une hauteur totale de 100 px dans l'espace vertical de la page.

Conformément aux spécifications du W3C, le pourcentage de hauteur doit être défini en fonction de la hauteur du conteneur de l'élément parent de cet élément. Ainsi, si vous définissez la hauteur d'un p sur height: 50%; et que la hauteur de son élément parent est de 100 px, alors la hauteur du p devrait être de 50 px.

Alors pourquoi height:100%; ne fonctionne pas

Lors de la conception d'une page, vous placez un élément p à l'intérieur et vous voulez qu'il occupe toute la hauteur de la fenêtre. faites-le, vous ajouterez l'attribut css p à ce height: 100%;. Cependant, si vous définissez la largeur sur <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%;, la largeur de l'élément s'étendra immédiatement sur toute la largeur horizontale de la fenêtre. Est-ce que la même chose se produit avec la hauteur ?

Faux.

Pour comprendre pourquoi, vous devez comprendre comment les navigateurs calculent la hauteur et la largeur. Les navigateurs Web prennent en compte la largeur ouverte de la fenêtre du navigateur lors du calcul de la largeur effective. Si vous ne définissez aucune valeur par défaut pour la largeur, le navigateur affichera automatiquement le contenu de la page en mosaïque pour remplir toute la largeur horizontale.

Mais la méthode de calcul de la hauteur est complètement différente. En fait, le navigateur ne calcule pas du tout la hauteur du contenu, sauf si le contenu dépasse la portée de la fenêtre d'affichage (ce qui provoque l'apparition de barres de défilement). Ou vous définissez une hauteur absolue pour la page entière. Sinon, le navigateur laissera simplement le contenu s’empiler et la hauteur de la page n’aura pas du tout besoin d’être prise en compte.

Étant donné que la page n'a pas de valeur de hauteur par défaut, lorsque vous définissez la hauteur d'un élément sur un pourcentage de hauteur, vous ne pouvez pas obtenir la hauteur de l'élément parent et ne pouvez donc pas calculer votre propre hauteur. En d'autres termes, la hauteur de l'élément parent n'est qu'une valeur par défaut : height: auto;. Lorsque vous demandez au navigateur de calculer le pourcentage de hauteur en fonction d'une telle valeur par défaut, vous obtenez uniquement le résultat undefined. C'est-à-dire une valeur null, et le navigateur ne réagira en aucune façon à cette valeur.


L'exemple de démonstration ci-dessus est que l'élément parent ne définit pas de hauteur fixe, donc la hauteur de l'élément enfant height: 100% ne fonctionnera pas soit. Vous pouvez juger que la hauteur de l'élément enfant n'est pas 100% basée sur la couleur d'arrière-plan de l'élément parent.

Donc, si vous souhaitez que le pourcentage de hauteur d'un élément height: 100%; fonctionne, vous devez définir une valeur valide pour la hauteur de tous les éléments parents de cet élément. En d’autres termes, vous devez faire ceci : 

<html>
  <body>
    <p style="height: 100%;">
      <p>
        想让这个p高度为 100% 。      </p>
    </p>
  </body></html>

Maintenant, vous avez donné à ce p une hauteur de 100 % et il a deux éléments parents 6c04bd5ca3fcae76e30b72ad730ca86d et 100db36a723c770d327fc0aef2ce13b1. Pour que le pourcentage de hauteur de votre p fonctionne, vous devez définir la hauteur de 6c04bd5ca3fcae76e30b72ad730ca86d et 100db36a723c770d327fc0aef2ce13b1. 

<html style="height: 100%;">
  <body style="height: 100%;">
    <p style="height: 100%;">
      <p>
        这样这个p的高度就会100%了      </p>
    </p>
  </body></html>


Comme vous pouvez le voir sur cette démo, height: 100%; fonctionne.

Certaines choses auxquelles vous devez faire attention lorsque vous utilisez height: 100%;

1. Les marges et le remplissage feront apparaître des barres de défilement sur votre page, ce qui n'est peut-être pas ce que vous souhaitez.

2. Si la hauteur réelle de votre élément est supérieure au pourcentage de hauteur que vous avez défini, la hauteur de l'élément s'agrandira automatiquement.

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!

Déclaration：
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
Article précédent：La différence entre la hauteur et la hauteur de ligne en CSSArticle suivant：La différence entre la hauteur et la hauteur de ligne en CSS

Articles Liés

Voir plus