您html实际上恰好延伸到视口的 100% 高度，因为这里的视口是浏览器窗口，而不是内部内容。
考虑一下（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这里有 300px 的高度并且是滚动的。当您滚动内容时，您只需移动内部 div 但高度保持不变，即300px. height:100%当您设置为 html时会发生完全相同的情况。您的浏览器高度保持不变。
当您缩小视口时，您没有滚动，因此内部内容的高度小于视口的高度。
简而言之，html {height:100%}与父母的身高有关，而不是与内部内容的高度有关
更新：
您可以为块元素的高度指定 3 种类型的值：
该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。根元素上的百分比高度是相对于初始包含块的。
- auto - 高度取决于其他属性的值。（一般在内部内容的高度上：文本、其他内联元素、块元素等）
当浏览器显示您的页面时会发生什么：
- 它得到
height: 100%了<html>。这意味着生成的高度是根据html包含块 ( initial containing block，即browser window 在这种情况下的生成框 ( 在这种情况下 - 元素) 的高度来计算的。比方说1024px。
- 然后它
height: 100%需要<body>。它会将body' 高度设置为 ' 的已计算高度html，即1024px.
- 然后浏览器适用
height:auto于#wrapper，然后#container和<p>。我不知道它究竟是如何做到的，但可以假设它推迟了高度设置（以及分别依赖于背景、边框等的所有其他样式）并继续处理内部内容。
- 下一点是文本内容。浏览器采用指定的或它自己的相关属性，即
default styles字体系列、字体大小和文本的高度。
- 之后，它会将高度设置为 -
<p>元素，因此<p>将向下延伸以包含所有内容（在这种情况下为文本）。同样的情况也发生在 #container和 上#wrapper。
如果碰巧 的高度#wrapper大于主体的高度（1024 px如已商定的那样），overflow则应将其应用于body. 这是visible默认设置。然后overflow: visible应用于html. 然后浏览器显示整个window. 老实说，我不知道这是否由 W3C 规范指定，但可以假设它是。
因此，当您滚动窗口时，您的html和body会像所有其他元素一样被移动。这与任何其他元素的行为相同（就像我在上面发布的 jsfiddle 中一样）：
请注意，背景是在body元素上设置的，但它延伸到整个画布，即远远超出body元素本身。这是为了您担心在 body 上设置 bg-property 的可能必要性。这 100% 符合W3C 规范，该规范声明（删减）：
对于根元素是...“html”元素的文档，其“背景颜色”的计算值为“透明”，“背景图像”的计算值为“无”，用户代理必须改为使用背景的计算值为canvas绘制背景时，该元素的第一个 ...“body”元素子元素的属性，并且不得为该子元素绘制背景。这样的背景也必须锚定在同一点，就像它们只为根元素绘制时一样。
当您缩小页面时，浏览器会重新计算所有尺寸。比方说，每次Ctrl+-点击页面都会缩小，例如 20%。然后你的所有文本都被缩小了，因为它的高度取决于字体大小，它受Ctrl+-点击的影响，相应地<p>，所有#container的#wrapper都被缩小了，因为它们的高度取决于text's 的高度。但是body两者html都有高度，这取决于window不受Ctrl+-点击影响的高度。这就是为什么你最终得到这个：
在这种情况下，宽度和高度行为之间没有区别。您看不到与水平尺寸相同的问题，因为您设置width: 960px;的尺寸#container小于浏览器窗口的宽度，因此不会发生溢出。如果宽度#container超过身体宽度，您会看到：
这一切都是正常和预期的行为，这里没有什么要解决的。
