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

【问题标题】：Why doesn't the html element take up the whole browser viewport?为什么html元素不占据整个浏览器视口？
【发布时间】：2017-02-09 01:11:55
【问题描述】：

我一直在做一个网站。许多人声称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 不应该默认适合浏览器中的整个屏幕吗？

【问题讨论】：

标签： html css

【解决方案1】：

尽管是根元素，html 在 CSS 方面没有特殊属性；它是正常流程中的常规块框，默认情况下，块框没有固有高度。默认高度为auto； auto 如何计算的具体细节在spec 中进行了描述，但基本上对于流入块框，这意味着与其内容要求一样高，仅此而已。 body 元素也是如此。

请注意，如果您为html 指定背景颜色，则该背景颜色将传播或“溢出”到整个视口，尽管html 的高度不会改变。这种行为是有意的（背景也可以以类似的方式从body传播到html）；请参阅我对这些相关问题的回答以获得解释：

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

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

确实适用于 quirks 模式和非常旧的 IE 版本（早于 6）；主要是由于对定义不明确的 Web 标准的遵守不力（这是最初的 CSS2 建议发布的时候，而 CSS 本身仍处于起步阶段）。也就是说，html 和 body 元素在 quirks 模式下确实都是视口高度的 100%，而上述 html 和 body 默认为内容高度的行为仅适用于标准模式。

【讨论】：

我听说body标签和html标签的区别在于BODY元素可能并不总是命中视口的“底部”。在这种情况下，html 标签也没有命中它。如果不考虑浏览器的视口，html标签还有什么意义？
@AnimalTesting：html 元素的关键在于它是 HTML 文档的根元素。它与它的显示方式无关，但是因为 DOM 包含一个 body 元素作为 html 元素的子元素，所以浏览器需要至少确保两个元素都显示为块以使布局起作用。
是否有与浏览器视口有关的默认标签？
@AnimalTesting: 不，文档画布没有任何元素表示，甚至根元素也没有。
所以本质上 html 和 body 只是 div，一个绝对和一个相对？

【解决方案2】：

没有。 html 和 body 标记的高度默认值为 auto。所以你需要做类似的事情

html,body {
  height: 100%;
}

默认情况下，这些元素的背景被渲染为全屏。

【讨论】：

你能解释一下为什么html不默认宽度和高度100%吗？
网页上写着： •html元素的高度和宽度由浏览器窗口控制。如果是，那我为什么需要将高度设置为 100%？
因为它是块级实体。就像你有一个特定高度的父 div 和一个默认高度为 auto 的子 div，子 div 不会自动设置为其父级的 100% 高度。
因此，即使 html 标记确实延伸到视口而没有进一步延伸，只要没有足够的内容，它就不必延伸？
@AnimalTesting：该网页上的声明似乎不准确。