为什么位于<html>内部底部的页脚在<html>高度始终等于视口高度时会移动到视口下方？

Question

为什么位于<html>内部底部的页脚在<html>高度始终等于视口高度时会移动到视口下方？

5

这篇文章指出，<html>元素的高度是由浏览器计算的，始终等于视口的高度，请参考图片以便快速查看。因此，在这个固定页脚示例中，页脚在<html>元素内部绝对定位，并在内容超过视口高度的100％时向下移动。如果它向下移动，则我认为<html>元素的高度会变大，超过视口的100％，这与开始提到的文章相矛盾。我错过了什么？

根据Hashem Qolami的回答进行更新：
初始包含块的高度和宽度由浏览器自动计算，始终等于视口的尺寸。 HTML元素的高度相对于其内容，但如果我们明确给它高度为100％，则它将占用其包含块的高度，该包含块的高度等于视口的尺寸。这些结论/主要观点是否正确？

- courses.indepth.dev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

不要被那篇文章所迷惑。乍一看可能会让人感到困惑，但我会尝试向您展示浏览器如何处理<html>元素。

<html>元素的高度和宽度由浏览器窗口控制。

这对于width是正确的，但对于height则不正确。

<html>元素 - 像块级元素一样 - 占据其包含块¹的整个水平空间，即初始包含块：

根元素所在的包含块是一个矩形，称为初始包含块。对于连续媒体，它具有视口的尺寸，并锚定在画布原点；对于分页媒体，则是页面区域。

但是默认情况下，其计算高度相对于其内容, 除非您给它明确的height²。因此以下陈述是不正确的：

<html>元素的高度由浏览器计算，并始终等于视口的高度

现在你可能会问：“如果<html>不占据视口的高度，为什么给<html>设置background-color 会改变视口的背景颜色？”这是因为视口会采用根元素<html>的背景颜色。这在规范中有所说明。

3.11.1. 画布背景和根元素

根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布。但是，任何图像都相对于根元素进行大小和定位，就好像它们只为该元素绘制一样（换句话说，背景定位区域与根元素相同）。根元素不会再次绘制此背景，即其背景的使用值为透明。

此外，如果未指定<html>的背景颜色，则将采用<body>的背景颜色（如果有），并将其传递给视口。这在规范中已经描述过了。您还可以查看SO上的此主题：

将背景应用于<html>和/或<body>

但是你可能会想知道为什么"绝对定位的元素相对于视口而不是<html>元素定位"³

答案是因为绝对定位的元素相对于其包含块定位。fixed定位的元素相对于初始化包含块定位，该包含块的尺寸为视口的尺寸。而absolute定位的元素相对于最近具有除static以外的任何position属性的祖先元素建立的包含块。

关键点是：

如果没有这样的祖先元素，则包含块是初始包含块。

因此，在 <html> 中，一个具有 bottom: 0 声明的 absolute 定位元素不会相对于 <html> 本身进行定位，而是相对于初始包含块即视口进行定位；示例在这里。

为了将其相对于 <html> 定位，我们必须通过给 <html> 添加 position: relative 来为其建立一个包含块；示例在这里⁴。

话虽如此，如果您给<html>设置height为100%，它将占用视口高度的100%,但是如果其内容变得太大超过了计算出的高度，它会溢出<html>元素。因此，absolute定位的元素将不再放置在页面底部。

我认为<html>元素的高度会比视口的100%更大

您的想法是正确的。这是因为在<html>上使用了min-height: 100%声明，而不是height属性。

来自MDN：

min-height CSS属性用于设置给定元素的最小高度。它防止高度属性的使用值变小于min-height指定的值。

它使得<html> 可以通过其内容超出视口的高度限制。

¹ _{有时候人们会使用“父级”这个词来指代盒子的包含块。这是一个“欺骗儿童”的说法！事实上，块级元素要遵守所在包含块的宽度。}

² _{在演示中，红色框显示了<html>元素的边框框盒，蓝色框属于<body>。}

³ _{假设<html>默认情况下不占据整个视口的高度。}

⁴ _{这正是Twitter Bootstrap的粘性页脚示例中所做的。}