This article表示＆lt; html＆gt;的高度element由浏览器计算，并始终等于视口的高度see the picture，以便快速参考。 所以在this sticky footer example中，页脚绝对位于底部＆lt; html＆gt;如果内容超过视口高度的100％，则向下移动元素。如果它向下移动比我假设＆lt; html＆gt;的高度元素大于视口的100％，这与开头提到的文章相矛盾。我错过了什么？
更新基于Hashem Qolami的答案：
初始包含块的高度和宽度由浏览器自动计算，并始终等于视口尺寸。
HTML元素高度是相对于其内容的，但是如果我们给它显示100％的高度，它需要100％的包含块的高度，它是包含高度等于视口的块的块。这些结论\要点是否正确？
答案 0 :(得分：4)
不要让那篇文章欺骗你。首先看起来可能会让人感到困惑，但我会尝试向您展示浏览器如何处理<html>元素。
html元素的高度和宽度由浏览器窗口控制。
对于width的{{1}} 但不是真的，情况属实。
height元素 - 与块级元素一样 - 占用containing block 1 的整个水平空间，即initial containing block :.
root element所在的包含块是一个矩形 称为初始包含块。对于连续媒体，它有 视口的尺寸并锚定在画布原点;它是 分页媒体的页面区域。
默认情况下，其计算高度为is relative to its contents，除非您give it an explicit height 2 。因此，以下陈述不正确：
<html>元素的高度由浏览器计算并始终 等于视口的高度
现在你可能会问“如果<html>没有取得视口的高度，为什么要给<html> changes the background color of the viewport background-color？ “
这是因为视口采用根元素的背景颜色<html>。这在spec：
<强> 3.11.1. The Canvas Background and the Root Element
根元素的背景成为背景 帆布及其背景绘画区域延伸至覆盖整个区域 帆布。但是，任何图像的大小和位置都相对于 根元素就好像它们仅为该元素绘制一样。 （其他 单词，背景定位区域确定为根 element。）根元素不会再次绘制此背景，即 其背景的使用价值是透明的。
此外，如果未指定<html>的背景颜色，则会采用<html>（如果有的话）和it'll pass it to the viewport的背景颜色。这已在the spec中描述。您也可以在SO上查看此主题：
但你可能再次想知道“为什么<body>定位元素与视口相对而不是absolute元素” 3
答案是因为绝对定位的元素相对于它们的包含块定位。 <html>定位元素相对于包含视口尺寸的初始包含块。 fixed定位元素与其包含块有关，该块由最近的祖先建立，absolute除position之外的其他任何内容。
关键点is：
如果没有这样的祖先，则包含块是初始值 包含块。
因此，在static内absolute声明的bottom: 0定位元素不会放在<html>本身，而是放在初始包含块中，即视口;的 Example Here
为了相对于<html>定位它，我们必须通过<html> <html> position来为它建立一个包含块;的 Example Here 4
话虽如此，如果你给relative <html> height 100%，100% of height of the viewport，，，如果其内容得到 大于超出计算高度的it'll overflow the <html>元素。因此，absolute定位元素将不再位于页面底部。
我认为元素的高度大于100％ 视口
你的想法是对的。这是因为在<html>而不是height属性上使用了min-height: 100%声明。
来自 MDN ：
min-heightCSS属性用于设置a的最小高度 给定的元素。它可以防止高度属性的使用值 变得小于为min-height指定的值。
它允许<html> get higher than the viewport（按其内容）。
1 人们有时会使用术语“parent”来引用包含块的框。那是 Lie-to-children ！事实上，块级元素与它们所在的containing block的宽度有关。
2 在演示中，红色框显示<html>元素的边框，蓝色框属于<body>。
3 假设<html>默认不占用视口的整个高度。
4 这正是在Twitter Bootstrap's sticky footer示例中所做的。
