为什么html元素不占用整个浏览器视口？

Question

我一直在网站上工作.许多人声称该html元素扩展到整个视口.当我做这样的代码:

<!doctype html>
<html>
<head>
<style>
html{
    border:1px solid red;
}
</style>

<meta charset="utf-8">
<title>Test</title>
</head>

<body>
Hi
</body>
</html>

边框仅显示在屏幕的顶部,显示"Hi".是不是html应该默认适合浏览器中的整个屏幕？

Answer 1

尽管是根元素,html但在CSS方面没有特殊属性; 它是正常流程中的常规块框,默认情况下,块框没有固有高度.默认高度是auto; 如何具体细节auto中的描述进行计算规范,但基本上在流块盒,这意味着一样高它们的内容要求,并且没有更多.这同样适用于该body元素.

请注意,如果指定背景颜色html,则背景颜色将传播或"渗透"到整个视口上,但高度html不会更改.这种行为是有意的(背景也可以以类似的方式传播body到html); 请参阅我对这些相关问题的答案以获得解释:

• <html>宽度小于其背景
• 将背景应用于<html>和/或<body>

另请注意,您期望的行为,即

是不是html应该默认适合浏览器中的整个屏幕？

确实适用于怪癖模式和非常旧版本的IE(早于6); 主要是由于对Web标准定义不严格的依从性差(这是原始CSS2推荐发布的时候,CSS本身仍然处于起步阶段).也就是说,在quirks模式下,html和body元素确实都是视口高度的100%,并且上述行为html和body默认为内容高度仅适用于标准模式.