Comment manipuler la hauteur : 100 % en CSS pour que cela fonctionne-tutoriel CSS-php.cn

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

巴扎黑

Libérer： 2017-06-28 10:02:10

original

1581 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

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!