您的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 - 高度取决于其他属性的值。 （一般在内部内容的高度上：文本、其他内联元素、块元素等）
当浏览器显示您的页面时发生了什么：
- 它为
<html> 得到height: 100%。这意味着生成的高度是根据包含块（initial containing block，即browser window 在这种情况下）的生成框（在这种情况下为html-元素）的高度计算的。假设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 元素上设置的，但它延伸到整个canvas，即远远超出body 元素本身。这是为了您担心在 body 上设置 bg-property 的可能必要性。这 100% 符合W3C spec 的规定（删减）：
对于根元素是...“html”元素的文档，“背景颜色”的计算值为“透明”，“背景图像”的计算值为“无”，用户代理必须改为使用计算值为 canvas 绘制背景时，该元素的第一个 ... "body" 元素子元素的背景属性，并且不得为该子元素绘制背景。此类背景也必须锚定在与仅为根元素绘制时相同的位置。
当您缩小页面时，浏览器会重新计算所有尺寸。比方说，每点击一次Ctrl + -，页面就会缩小，例如缩小 20%。然后你所有的文字都被缩小了，因为它的高度取决于字体大小，它受Ctrl + -点击的影响，相应地<p>，#container和#wrapper都被缩小了，因为它们的高度取决于在text 的高度上。但是body 和html 的高度都取决于window 的高度，它不受Ctrl + - 点击的影响。这就是为什么你最终得到这个：
在这种情况下，宽度和高度行为没有区别。您看不到与水平尺寸相同的问题，仅仅是因为您为#container 设置了width: 960px;，结果证明它小于浏览器窗口的宽度，因此不会发生溢出。如果#container 的宽度超过主体的宽度，您会看到：
这都是正常的预期行为，这里没有什么需要解决的。