html body高,html - html 和 body 元素高度 - 堆栈内存溢出

我一直在 Internet 上查找以了解 min-height 和 height 属性如何对 body 和 html 元素起作用。 我在很多地方都看到过以下代码

html {

height: 100%;

}

body {

min-height: 100%;

}

以上可以与其他一些div结合使用以获得粘性页脚。 另一个声明是要在 body 上设置百分比高度，我们还需要设置一个显式的 html 高度。

好吧，那么 html 标签的高度相对于百分比是多少？ 一些答案说如果视口的高度为 100%，它是相对于视口的。 现在视口的 100% 高度与什么有关？

这篇文章在这里说 html 元素的高度由视口HTML vsBody 控制，但这不是我看到的

HTML 元素的高度可以增加

但是为什么当内容增加时 html 元素的高度也会增加，正如在 Chrome 开发者工具中看到的那样

代码：

html { } .wrapper { padding-bottom: 3000px; } .footer { position: absolute; bottom: 0; left: 0; }

Height

Header

Content

Footer

HTML 元素的高度固定

只有当我明确地将 html 元素的高度设置为 100% 时，它才会得到一个固定的高度：

html { height: 100%; } .wrapper { padding-bottom: 3000px; } .footer { position: absolute; bottom: 0; left: 0; }

Height

Header

Content

Footer

这是固定高度：

粘性页脚

既然 HTML Element 的高度占据了整个内容，为什么我不能通过不在 html 上设置高度或设置 min-height 来实现粘性页脚？ 由于 body 是默认position: static ，如果我定位任何东西，它应该定位在 html 元素上，对吗？

但以下都不起作用：/

html { min-height: 100%; } .wrapper { padding-bottom: 1000px; } .footer { position: absolute; bottom: 0; left: 0; }

Height

Header

Content

Footer

html { } .wrapper { padding-bottom: 3000px; } .footer { position: absolute; bottom: 0; left: 0; }

Height

Header

Content

Footer

总之，谁能告诉我 html 和 body 元素的高度是如何计算的？

为什么上面的粘性页脚不起作用？

参考：