body {
background-color: red;
}<body>
<div>Hello World!</div>
</body>所以background-color: red; 适用于整个页面高度，但是当我检查页面时，正文的高度仅达到包含 Hello World! 的div。
请有人解释一下为什么会这样。
【问题讨论】：
主要原因是因为HTML取了background-color的background-color，因为：
根元素的背景变成了元素的背景 画布并覆盖整个画布 [...]
因此，由于HTML 的默认background-color 是transparent，它将采用来自BODY 的那个。但是，将颜色应用于HTML 和BODY 元素，您会看到BODY 背景不再覆盖整个页面。
html {
background-color: blue;
}
body {
background-color: red;
}<html>
<body>
<div>Hello World!</div>
</body>
</html>根元素的背景变成了元素的背景 画布并覆盖整个画布，锚定（对于
background-position) 在同一点上，如果它是 仅为根元素本身绘制。根元素不 再次绘制此背景。但是，对于 HTML 文档，我们建议作者指定
BODY元素而不是HTML元素的背景。为了 根元素是 HTML“HTML”元素或 XHTML 的文档 计算值为transparent的“html”元素background-color和none对于background-image，用户代理必须 而是使用该背景属性的计算值 元素的第一个 HTML“BODY”元素或 XHTML“body”元素的子元素 为画布绘制背景，不得绘制背景 对于那个子元素。这样的背景也必须锚定在 与仅为根部绘制相同的点 元素。
【讨论】：
这其实很符合逻辑。首先<html> 和<body> 标签是网页中的必需标签。 <html> 标签包含所有 <html> 代码，<body> 标签包含所有内容。
考虑基本HTML 文档的这种标准结构：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
规范将<html>定义为文档的根元素，在上面的示例中我们可以清楚地看到：该元素是所有其他元素的最顶层。降压止步于此，因为除了可以继承样式的级别之外，没有其他级别了。
从那里开始，组成仅有的两个直接落在里面的元素。事实上，规范直接定义了与，因为这是唯一需要区分的两个元素。
所以，这里的底线是文档的根元素，其中包含一个后代。事实上，CSS 中有一个 :root 选择器。这些目标完全相同。
我们很容易认为我们想要全面继承的任何样式都应该直接应用于<html>，因为它是文档的根元素。 <html> 在层次结构中取代 <body>，因此它必须包含所有全局样式。
但事实并非如此。实际上，以下内容的内联属性最初在规范中分配给<body>：
背景色
CSS 中有一个奇怪的地方，<body> 上的 background-color 会淹没整个视口，即使元素本身的指标没有覆盖整个区域。除非在 html 元素上设置了 background-color，否则不会。
如果泛滥是目标，最好将其设置在 html 元素上。
【讨论】：
CSS 技巧有一篇相关的帖子在优点 link 。似乎body样式被扩展为html是因为：
html 是文档的根元素，其中 body 是后代 包含在其中。事实上，CSS 中有一个 :root 选择器。这些 瞄准完全相同的东西
【讨论】：
您在检查中看到的高度是
min-height这等于高度的元素div，背景颜色变化max-height这等于 100% 他的父母（html）。
例如：
更改 min-height 并运行检查并查看结果：
body {
background-color: red;
min-height: 200px;
}<div>Hello World!</div>所以，您在检查中看到高度更改
200px;但红色覆盖了整个页面。
【讨论】：
正文是指在浏览器中显示的所有页面。因此，您只想为 div 赋予颜色，您可以使用 id 或 class 为该潜水赋予样式。和第一个答案一样。
<body>
<div class="some">Hello World!</div>
</body>
.some{
background-color: red;
}
或
<body>
<div id="some">Hello World!</div>
</body>
#some{
background-color: red;
}
【讨论】：
.some{
background-color: red;
}<div class="some">Hello World!</div>试试这个，就好像你给 body 上色一样，整个网页都会上色
【讨论】：