css - { height : 100%; position: absolute; } getting browser height? 背后的逻辑是什么

Question

好的，所以有三种获取浏览器窗口高度的方法(不是完整的网页高度，这就是区别)。

1. Vertical height unit, explained wonderfully here.
2. jQuery
3. Using { height: 100%; position: absolute; } on an element. (jsfiddle)

我不明白我列表中#3 背后的逻辑。

height: 100% 和absolute 定位。 height: 100% 填满父元素。定位 absolute 也是相对于父级的，所以它不应该占用页面的整个高度。视口(viewport)如何发挥作用？

我知道 fixed 是相对于视口(viewport)的，但我认为这是与 absolute 的区别。 height: 100% div 确实有一个父级，它是 body，它应该是相对的。

有人可以解释一下吗？

Answer 1

绝对定位的元素相对于第一个也被定位的父元素放置。 body 元素在您的示例中没有应用任何定位。因此，div 没有引用，因为绝对定位的元素已脱离正常流。

如果您将定位分配给正文，通常是 position:relative;，您将找到您要查找的内容。

W3C CSS2.1 explanation