我一直在 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; }
HeightHTML 元素的高度固定
只有当我明确地将 html 元素的高度设置为 100% 时,它才会得到一个固定的高度:
html { height: 100%; } .wrapper { padding-bottom: 3000px; } .footer { position: absolute; bottom: 0; left: 0; }
Height这是固定高度:
粘性页脚
既然 HTML Element 的高度占据了整个内容,为什么我不能通过不在 html 上设置高度或设置 min-height 来实现粘性页脚? 由于 body 是默认position: static ,如果我定位任何东西,它应该定位在 html 元素上,对吗?
但以下都不起作用:/
html { min-height: 100%; } .wrapper { padding-bottom: 1000px; } .footer { position: absolute; bottom: 0; left: 0; }
Heighthtml { } .wrapper { padding-bottom: 3000px; } .footer { position: absolute; bottom: 0; left: 0; }
Height总之,谁能告诉我 html 和 body 元素的高度是如何计算的?
为什么上面的粘性页脚不起作用?
参考: