什么是 { height: 100%; position: absolute; } 可以获取浏览器高度的逻辑？

Question

好的，获取浏览器窗口高度有三种方法（不是整个网页高度，这是区别）。

1. 垂直高度单位，在这里很好地解释了。
2. jQuery
3. 在元素上使用{ height: 100%; position: absolute; }。（jsfiddle）

我不理解列表中第三项背后的逻辑。

height: 100%和absolute定位。 height: 100％填满父级。定位absolute也相对于父级，因此它不应该占用整个页面的高度。视口如何发挥作用？

我知道fixed与视口相关，但我认为这是与absolute的区别。 height: 100% div确实有一个父元素，它是body，应该与其相关联。

有人能解释一下吗？

- Tarik

Answer 1

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

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

W3C CSS2.1 explanation

- Rob