html 和 body 元素的高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11995392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
height and width on html and body elements
提问by Jawad
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.
为什么我的 html、body 和 wrapper 元素没有扩展到 FF13 中浏览器/视图端口的 100% 高度。在 Firebug 中查看时，html、正文和包装器在距底部一定距离处垂直停止。容器 div 扩展到整个高度，因为它的高度由内容决定。
(1263px X 558px for html, body, wrapper) and (960px X 880px for container)
（html、body、wrapper 为 1263px X 558px）和（容器为 960px X 880px）
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.
查看默认 100% 以上情况，如下面的第一张图片所示。但是当我放大到最后一个可能的放大时，上面的情况不会发生，因为下面的第二张图片显示了 html、body、wrapper 扩展到整个高度。
(4267px X 1860px for html, body, wrapper) - (960px X 1000px for container)
（html、body、wrapper 为 4267px X 1860px）-（容器为 960px X 1000px）
回答by user907860
Your htmlactually exactly extends to 100% height of your viewport cause viewport here is the browser window, not the inner content.
您html实际上完全扩展到视口的 100% 高度，因为这里的视口是浏览器窗口，而不是内部内容。
Consider this (jsfiddle):
考虑这个（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;
}
div1here 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.
div1这里的高度为 300px 并且是滚动的。当您滚动内容时，您只需移动内部 div 但高度保持不变，即300px. 设置height:100%为 html时会发生完全相同的情况。您的浏览器的高度保持不变。
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
简而言之，html {height:100%}与父母的高度有关，而不是与内部内容的高度有关
UPDATE:
更新：
you can specify 3 types of values to the block-element's height:
您可以为块元素的高度指定 3 种类型的值：
length- set fixed height (i.g. '200px', '50em'). That's all, I can say nothing more about that.
percentage- from W3C spec:
length- 设置固定高度（ig '200px', '50em'）。仅此而已，对此我无话可说。
百分比- 来自W3C 规范：
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'。根元素上的百分比高度是相对于初始包含块的。
- auto- The height depends on the values of other properties. (Generally on the height of inner content: text, other inline elements, block elements etc.)
- auto- 高度取决于其他属性的值。（一般在内部内容的高度上：文本、其他内联元素、块元素等）
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.
- 它得到
height: 100%了<html>。这意味着生成的高度是根据生成的框（html在这种情况下为 -element）包含块（initial containing block，即browser window在这种情况下）的高度计算的。让我们说1024px。 - 那么它需要
height: 100%为<body>. 它将设置body的高度为已经计算的高度html，即1024px。 - 然后浏览器适用
height:auto于#wrapper，然后适用于#container和<p>。我不知道它是如何做到这一点的，但可以假设它推迟了高度设置（以及分别依赖于高度设置的所有其他样式，即背景、边框等）并继续处理内部内容。 - 下一点是文本内容。浏览器采用指定的或它自己的相关属性，即
default styles字体系列、字体大小和文本的高度。 - 之后，它会将高度设置为
<p>-element，以便<p>向下拉伸以包含所有内容（在这种情况下为文本）。同样的情况也发生在#container和 上#wrapper。
If it happens that the height of the #wrapperis greater than the body's one (1024 pxas it were agreed) than the overflowshould be applied to the body. That is visiblewhich is the default. Then overflow: visibleis 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.
如果碰巧 的高度#wrapper大于身体的高度（1024 px正如商定的那样），则overflow应该将 应用于body. 这是visible默认设置。然后overflow: visible应用于html. 然后浏览器显示整个window. 老实说，我不知道这是否由 W3C 规范指定，但可以假设是。
So when you scroll the window your htmland bodyare moved as are all the other elements. This is the same behavior as is with any other elements (like in jsfiddle I posted above):
因此，当您滚动窗口时，您的html和body会像所有其他元素一样移动。这与任何其他元素的行为相同（如我在上面发布的 jsfiddle 中）：
Note that the background is set on the bodyelement, but it extends to the entire canvasi.e. far beyond of the bodyelement itself. This is towards your concern of the possible necessity of setting bg-property on the body. This is 100% compliant with the W3C specwhich states (cutted):
请注意，背景是在body元素上设置的，但它扩展到整个画布，即远远超出body元素本身。这是为了您担心在 body 上设置 bg-property 的可能必要性。这 100% 符合W3C 规范，该规范指出（已删减）：
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.
对于根元素是一个......“html”元素的文档，“背景颜色”的计算值为“透明”，“背景图像”的计算值为“无”，用户代理必须改为使用背景的计算值为画布绘制背景时，该元素的第一个属性...“body”元素子元素，并且不得为该子元素绘制背景。这些背景也必须锚定在同一点，如果它们只为根元素绘制。
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>, #containerand #wrapperall are reduced cause their height depends on text's height. But bodyand htmlboth have height which depends on the window's height which is not affected by the Ctrl+ -click. That is why you finally get this:
当您缩小页面时，浏览器会重新计算所有尺寸。比方说，每次Ctrl+-单击页面都会缩小，例如 20%。然后你所有的文字都被缩小了，因为它的高度取决于字体大小，它受到Ctrl+-点击的影响，相应地<p>，#container并且#wrapper所有的文字都被缩小了，因为它们的高度取决于text的高度。但是body，html两者的高度都取决于window不受Ctrl+-单击影响的高度。这就是为什么你最终得到这个：
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 #containerwhich turned out to be less than your browser window's width, so no overflowing occurs. If the width of the #containerwere exceeding body's width you would see this:
在这种情况下，宽度和高度行为之间没有区别。你看不出水平尺寸相同的问题，只是因为你已经设置width: 960px;的#container，其结果是小于浏览器窗口的宽度，所以没有发生溢出。如果 的宽度#container超过身体的宽度，您会看到：
This all is a normal and expected behavior and there is nothing to solve here.
这一切都是正常和预期的行为，这里没有什么可解决的。
回答by OneChillDude
Because you can never set the height to 100% if the element is relative to the browser window. The reason for this is that because of scrolling, your browser window could potentially be infinitely big. You will have to set a fixed height, or you will just have to set the height to expand to whatever is inside of it.
因为如果元素相对于浏览器窗口，则永远不能将高度设置为 100%。原因是由于滚动，您的浏览器窗口可能无限大。您将必须设置一个固定的高度，或者您只需将高度设置为扩展到它内部的任何高度。
However width: 100%;is perfectly valid.
然而width: 100%;是完全有效的。
You will also need to use valid html tags. what I would do is, instead of using <wrapper> and <container>, I would make a class in your css. Class names are declared by starting them with a period.
您还需要使用有效的 html 标签。我会做的是，我会在你的 css 中创建一个类，而不是使用 <wrapper> 和 <container>。类名是通过以句点开头来声明的。
.container{
width: 100%;
}
<div class="container"></div>
Good Luck,
祝你好运，
-Brian
-布莱恩
