html和body元素的高度和宽度 [英] height and width on html and body elements
问题描述
如果我有以下标记
< html>
< body>
< div id =wrapper>
< div id =container>
< p>这里有大量的段落< / p>
< / div>
< / div>
< / body>
< / html>
html，body，#wrapper
{
width：100％;
height：100％;
}
#container
{
width：960px;
margin：0 auto;
}
为什么我的html，body和wrapper元素不能扩展到100％浏览器/查看端口在FF13。 html，body和wrapper在Firebug中查找时垂直停止距离底部一定距离。容器div扩展到全高，因为它的高度由内容决定。
（html，body，wrapper为1263像素X 558像素，容器为960像素x 880像素）
查看默认100％，如下面的第一张图片所示。但是当我放大到最后一个poosible放大，上述不会发生，因为下面的第二个图像显示，html，body，wrapper扩展到全高度。
（对于html，body，wrapper，为4267px X 1860px） - （960px x 1000px for container）
您的 html 实际上完全扩展到100％这里是浏览器窗口，而不是内容。
考虑这个（ ie远远超过 body 元素本身。这是你的担心，可能需要设置bg属性的身体。这是100％符合 W3C规格的状态（切割）：
对于其根元素为...的html元素的文档，已为background-color和none计算了'transparent' 'background-image'时，用户代理必须改为使用画布绘制背景时，该元素的第一个...body元素的背景属性的计算值，并且不得绘制背景为该子元素。
当您缩放时，此类背景必须锚定在与它们只绘制根元素时相同的位置。然后浏览器重新计算所有维度。让我们说，每个 Ctrl + - 点击页面收缩，例如，20％。那么所有的文本都会减少，因为它的高度取决于字体大小，它受 Ctrl + - 点击，相应地< p> ， #container 和 #wrapper 所有都减少，因为它们的高度取决于 text 的高度。但是 body 和 html 都有高度取决于窗口 > 点击不影响的高度。 Ctrl 这就是为什么你终于得到这个：
在这种情况下，宽度和高度行为之间没有区别。您没有看到与水平维度相同的问题，因为您已为 #container width：960px; >其结果是小于浏览器窗口的宽度，因此不会发生溢出。如果 #container 的宽度超过了body的宽度，你会看到：
这是一个正常和预期的行为，这里没有什么解决。 / strong>
If I have the following markup
<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>
with the following styles
html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}
why does not my html, body and wrapper elements extend to 100% height of the browser/view port in FF13. The html, body and wrapper stop vertically about some distance from the bottom when looking in Firebug. The container div extends to the full height as it's height is determined by the content.
(1263px X 558px for html, body, wrapper) and (960px X 880px for container)
Looking at default 100% the above happens as the first image below shows. But when I zoom to the last poosible zoom in, the above does not happen as the second image below shows and the html, body, wrapper extends to the full height.
(4267px X 1860px for html, body, wrapper) - (960px X 1000px for container)
Your html actually exactly extends to 100% height of your viewport cause viewport here is the browser window, not the inner content.
Consider this (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 here has the height of 300px and is scrolled. When you scroll content you simply move inner div but height remains untouched that is 300px. Exactly the same happens when you set height:100% to html. Your browser's height remains the same.
When you zoomed out your viewport then you have not scroll, so inner content's height is less than the height of viewport.
Shortly, html {height:100%} relates to parent's height not to the height of the inner content
UPDATE:
you can specify 3 types of values to the block-element's height:
length - set fixed height (i.g. '200px', '50em'). That's all, I can say nothing more about that.
percentage - from W3C spec:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
- auto - The height depends on the values of other properties. (Generally on the height of inner content: text, other inline elements, block elements etc.)
What is happening when browser shows your page:
- it gets
height: 100%for<html>. That means that the resulting height is calculated with respect to the height of the generated box's (html-element in that case) containing block (initial containing block, i.e.browser windowin that case). Let's say1024px. - then it takes
height: 100%for<body>. It will setbody's height to the already calculated height of thehtml, that is1024px. - then browser applies
height:autoto the#wrapperand then the#containerand the<p>. I don't know how it does that exactly but can suppose that it postpones the height setting (and respectively all other styles which depend on that i.e. backgrounds, borders etc.) and proceeds to the inner content. - next point is text content. Browser takes related properties specified or it's own, that is
default styles, like font-family, font-size and the height of the text. - after that it will set height to the
<p>-element so the<p>will stretch down to contain all content (the text in that case). The same then happens to the#containerand the#wrapper.
If it happens that the height of the #wrapper is greater than the body's one (1024 px as it were agreed) than the overflow should be applied to the body. That is visible which is the default. Then overflow: visible is applied to the html. Then browser shows scroll for the entire window. Honestly, I don't know whether this is specified by the W3C spec, but can suppose it is.
So when you scroll the window your html and body are moved as are all the other elements. This is the same behavior as is with any other elements (like in jsfiddle I posted above):
Note that the background is set on the body element, but it extends to the entire canvas i.e. far beyond of the body element itself. This is towards your concern of the possible necessity of setting bg-property on the body. This is 100% compliant with the W3C spec which states (cutted):
For documents whose root element is an ... "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first ... "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
When you zoom out your page then browser recalculates all dimensions. Let's say, with each Ctrl + - click page shrinks, for example, for 20 %. Then all your text is reduced, cause its height depends on the font-size, which is affected by the Ctrl + - click, correspondingly <p>, #container and #wrapper all are reduced cause their height depends on text's height. But body and html both have height which depends on the window's height which is not affected by the Ctrl + - click. That is why you finally get this:
There is no difference here between width and height behavior in that case. You don't see the same issue with horizontal dimension simply because you've set width: 960px; for the #container which turned out to be less than your browser window's width, so no overflowing occurs. If the width of the #container were exceeding body's width you would see this:
This all is a normal and expected behavior and there is nothing to solve here.
这篇关于html和body元素的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
