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)
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.
Que se passe-t-il lorsque le navigateur affiche votre page:
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
.height: 100%
pour <body>
. Il définira la hauteur de body
sur la hauteur déjà calculée de html
, c'est-à-dire 1024px
.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.default styles
, telles que font-family, font-size et la hauteur du texte.<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):
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:
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:
Tout cela est un comportement normal et attendu et il n’ya rien à résoudre ici.
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