如果 <html> 高度总是等于视口的高度，为什么 <html> 内的底部定位页脚会移动到视口下方答案

【问题标题】：why bottom positioned footer inside <html> moves below viewport if <html> height is always equal to viewport's height如果 <html> 高度总是等于视口的高度，为什么 <html> 内的底部定位页脚会移动到视口下方
【发布时间】：2014-09-17 14:34:07
【问题描述】：

This article 声明元素的高度由浏览器计算并始终等于视口的高度，see the picture 以供快速参考。所以在this sticky footer example 中，页脚绝对位于元素内的底部，如果内容超过视口高度的 100%，则页脚会向下移动。如果它向下移动，我认为元素的高度大于视口的 100%，这与开头提到的文章相矛盾。我错过了什么？

更新基于Hashem Qolami的回答：
初始包含块的高度和宽度由浏览器自动计算，并且始终等于视口尺寸。 HTML 元素的高度是相对于它的内容而言的，但是如果我们给它显式的 100% 的高度，它会占用其包含块高度的 100%，该包含块的高度等于视口的高度。这些结论\要点是否正确？

【问题讨论】：

标签： html css

【解决方案1】：

不要让那篇文章欺骗你。乍一看，它可能看起来令人困惑，但我会尝试向您展示浏览器如何处理 <html> 元素。

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

width 是这样但height 不是这样。

<html> 元素 - 与块级元素一样 - 占据其 containing block¹ 的整个水平空间，即 initial containing block:。

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

但是默认情况下它的计算高度is relative to its contents，除非你give it an explicit height²。因此，以下陈述不正确：

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

现在你可能会问“如果<html> 不占用视口的高度，为什么要给background-color <html> changes the background color of the viewport？”

这是因为视口采用了根元素的背景颜色，即<html>。这记录在spec：

3.11.1. The Canvas Background and the Root Element

根元素的背景变成了元素的背景画布及其背景绘画区域延伸到覆盖整个帆布。但是，任何图像的大小和位置都相对于根元素，就好像它们是单独为该元素绘制的一样。（其他也就是说，背景定位区域被确定为根元素。）根元素不再绘制此背景，即其背景的使用值是透明的。

另外，如果<html>的背景色没有指定，则取<body>（如果有的话）和it'll pass it to the viewport的背景色。这已在the spec 中进行了描述。此外，您可能想在 SO 上查看此主题：

Applying a background to <html> and/or <body>

但您可能又想知道“为什么absolutely 定位的元素相对于视口而不是<html> 元素进行定位”³

答案将是因为绝对定位的元素是相对于它们的包含块定位的。 fixed 定位元素相对于初始包含块，该块采用视口的尺寸。并且absolute 定位元素尊重它们的包含块，该包含块由最近的祖先建立，position 不是static。

重点is：

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

因此，absolute 定位元素 - 具有 bottom: 0 声明 - 在 <html> 内部不会相对于 <html> 本身放置，而是相对于初始包含块，即视口； Example Here。

为了相对于<html> 定位它，我们必须通过给<html> 一个position 的relative 来为其建立一个包含块； Example Here⁴

话虽这么说，如果你给<html> 一个height 或100%，它将需要100% of height of the viewport，但是如果它的内容得到那个大于计算出的高度，it'll overflow the <html> 元素。因此，absolute 定位元素将不再放置在页面底部。

我假设元素的高度大于 100% 视口的

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

来自MDN：

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

它让<html> get higher than the viewport（通过它的内容）。

¹_{人们有时会使用“父”一词来指代盒子的包含块。那是一个Lie-to-children！事实上，块级元素与它们所在的containing block 的宽度有关。}

²_{在demo中，红框表示<html>元素的边框，蓝框属于<body>。}

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

⁴_{这正是Twitter Bootstrap's sticky footer 示例中所做的。}

【讨论】：

谢谢！我还是不太明白浏览器用来计算html 元素高度的工作流程:)
非常感谢您的详细解答！我现在很清楚缺少了什么——它是最初的包含块。你能检查我在最初问题中添加的结论吗？ PS。我希望我能不止一次地支持你的答案:)
@Maximus 这正是我的想法。
好！再次感谢！最好的，M！