web-dev-qa-db-fra.com

hauteur et largeur sur les éléments html et body

Si j'ai le balisage suivant

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

avec les styles suivants

html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

pourquoi mes éléments html, body et wrapper ne s'étendent-ils pas à 100% de la hauteur du port de navigateur/vue dans FF13. Le code html, le corps et l’emballage s’arrêtent verticalement à une certaine distance du fond lorsque vous regardez dans Firebug. Le conteneur div s'étend sur toute la hauteur car sa hauteur est déterminée par le contenu.

(1263px X 558px pour html, body, wrapper) et (960px x 880px pour le conteneur)

Si vous regardez 100% par défaut, ce qui précède se produit comme le montre la première image ci-dessous. Mais lorsque je zoome sur le dernier zoom avant, cela ne se produit pas comme le montre la deuxième image ci-dessous et le code html, body, wrapper s’étend sur toute la hauteur.

(4267px X 1860px pour html, body, wrapper) - (960px x 1000px pour le conteneur)

enter image description hereenter image description here

htmlcssheight
5
Jawad

En fait, votre html s'étend exactement à 100% de la hauteur de votre fenêtre d'affichage. Cette fenêtre est la fenêtre du navigateur, pas le contenu intérieur.

Considérez ceci ( jsfiddle ):

<div id="div1">
    <div  id="div2">
        <div  id="div3">
            very much content
        </div>
    </div>
</div>

#div1 {
    height:300px;
    overflow-y:scroll;
    border: 1px solid black;
}
#div2 {
    height:100%;
}
#div3 {
    height:600px;
}

div1 a ici la hauteur de 300px et défile. Lorsque vous faites défiler le contenu, vous déplacez simplement la division interne mais la hauteur reste inchangée, à savoir 300px. La même chose se produit lorsque vous définissez height:100% en HTML. La hauteur de votre navigateur reste la même.

Lorsque vous avez zoomé sur la fenêtre d'affichage, vous ne pouvez plus faire défiler l'écran. La hauteur du contenu intérieur est donc inférieure à la hauteur de la fenêtre d'affichage.

En bref, html {height:100%} se rapporte à la hauteur du parent et non à la hauteur du contenu interne

UPDATE:

vous pouvez spécifier 3 types de valeurs à la hauteur de l'élément de bloc:

  • length - définissez une hauteur fixe (par exemple, '200px', '50em'). C'est tout, je ne peux rien dire de plus à ce sujet.

  • pourcentage - à partir de Spéc. W3C : 

Le pourcentage est calculé par rapport à la hauteur du bloc contenant de la boîte générée. Si la hauteur du bloc contenant n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas positionné de manière absolue, la valeur est calculée sur 'auto'. Un pourcentage de hauteur sur l'élément racine est relatif au bloc contenant initial.

  • auto - La hauteur dépend des valeurs des autres propriétés. (Généralement sur la hauteur du contenu interne: texte, autres éléments en ligne, éléments de bloc, etc.) 

Que se passe-t-il lorsque le navigateur affiche votre page:

  1. il obtient height: 100% pour <html>. Cela signifie que la hauteur résultante est calculée par rapport à la hauteur du bloc contenant (html- élément dans ce cas) généré (initial containing block, c'est-à-dire browser window dans ce cas). Disons 1024px.
  2. alors il faut height: 100% pour <body>. Il définira la hauteur de body sur la hauteur déjà calculée de html, c'est-à-dire 1024px.
  3. puis le navigateur applique height:auto au #wrapper, puis au #container et au <p>. Je ne sais pas comment cela fonctionne exactement, mais je peux supposer que cela reporte le réglage de la hauteur (et tous les autres styles qui dépendent de cela, c'est-à-dire les arrière-plans, les bordures, etc.) et passe au contenu intérieur.
  4. le point suivant est le contenu du texte. Le navigateur prend les propriétés associées spécifiées ou propres, c'est-à-dire default styles, telles que font-family, font-size et la hauteur du texte.
  5. après cela, il définira height avec l'élément <p>- afin que <p> s'étende pour contenir tout le contenu (le texte dans ce cas). Il en va de même pour le #container et le #wrapper.

S'il arrive que la hauteur de #wrapper soit supérieure à celle du corps (1024 px comme convenu), la overflow devrait être appliquée à la body. C'est visible qui est la valeur par défaut. Alors overflow: visible est appliqué à la html. Ensuite, le navigateur affiche le défilement de la window entière. Honnêtement, je ne sais pas si cela est spécifié par la spécification W3C, mais je peux le supposer.

Ainsi, lorsque vous faites défiler la fenêtre, vos html et body sont déplacés comme tous les autres éléments. C'est le même comportement que pour n'importe quel autre élément (comme dans jsfiddle que j'ai posté ci-dessus):

scrolled part of the body

Notez que l’arrière-plan est défini sur l’élément body, mais s’étend à l’ensemble du canvasi.e., bien au-delà de l’élément body lui-même. Cela concerne votre préoccupation quant à la nécessité éventuelle de fixer la propriété bg sur le corps. Ceci est 100% conforme à la spécification W3C qui stipule (coupé):

Pour les documents dont l'élément racine est un élément "html" dont les valeurs calculées sont "transparent" pour "couleur d'arrière-plan" et "aucune" pour "image d'arrière-plan", les agents utilisateurs doivent utiliser la valeur calculée de l'arrière-plan. propriétés du premier ... élément "body" de cet élément lorsque vous peignez des arrière-plans pour the canvas , et ne doivent pas peindre un arrière-plan pour cet élément enfant. Ces arrière-plans doivent également être ancrés au même point que s'ils étaient peints uniquement pour l'élément racine.

Lorsque vous effectuez un zoom arrière sur votre page, le navigateur recalcule toutes les dimensions. Supposons qu'avec chaque Ctrl + - page de clic se rétrécisse, par exemple, de 20%. Ensuite, tout votre texte est réduit, car sa hauteur dépend de la taille de la police, qui est affectée par le clic Ctrl + -. En conséquence, <p>, #container et #wrapper sont tous réduits, car leur hauteur dépend de la hauteur de text. Mais body et html ont tous deux une hauteur qui dépend de la hauteur de window qui n'est pas affectée par le clic Ctrl + -. C'est pourquoi vous obtenez enfin ceci: zoomed out page

Il n'y a pas de différence ici entre le comportement en largeur et en hauteur dans ce cas. Vous ne voyez pas le même problème avec la dimension horizontale simplement parce que vous avez défini width: 960px; pour le #container, qui s'est avéré être inférieur à la largeur de la fenêtre de votre navigateur; aucun débordement ne se produit donc. Si la largeur du #container dépassait la largeur du corps, vous verriez ceci: same issue but with the width

Tout cela est un comportement normal et attendu et il n’ya rien à résoudre ici.

24
user907860

Parce que vous ne pouvez jamais définir la hauteur à 100% si l'élément est relatif à la fenêtre du navigateur. La raison en est qu’en raison du défilement, la fenêtre de votre navigateur peut potentiellement être infiniment grande. Vous devrez définir une hauteur fixe, ou simplement définir la hauteur pour l’agrandir à l’intérieur.

Cependant, width: 100%; est parfaitement valide.

Vous devrez également utiliser des balises HTML valides. au lieu d'utiliser <wrapper> et <conteneur>, je créerais une classe dans votre css. Les noms de classe sont déclarés en commençant par un point.

.container{
width: 100%;
}

<div class="container"></div>

Bonne chance,

-Brian

1
OneChillDude