{height：100％;背后的逻辑是什么？位置：绝对;获得浏览器高度？

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也是相对于父级的，因此不应该占用页面的完整高度。视口如何发挥作用？

我知道fixed相对于视口，但我认为这与absolute不同。 height: 100% div确实有父，body，它应该是相对的。

有人可以解释一下吗？

Answer 1

绝对定位的元素相对于也定位的第一个父元素放置。在您的示例中，body元素没有应用于它的定位。因此，div没有参考，因为绝对定位的元素被从正常流中取出。

如果您为身体指定定位，通常为position:relative;，您将找到所需内容。

W3C CSS2.1 explanation