如何让高度真正达到100%

Question

在CSS中，当你将某个东西的宽度或高度设置为100%时，它实际上只是将其设置为浏览器窗口的100%。有没有办法让它100%覆盖整个页面？

让我换个说法:我希望这个元素(一个div)占据整个页面，不管你滚动多少次。拥有100%大小和100%宽度的父元素是不起作用的，因为它们被以相同的方式对待。我开始想，我可能必须使用JS来获取页面的高度，然后完全定义它。

Answer 1

只需对元素应用position:fixed即可。如果这是覆盖：

#overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%; 
}

注: IE6不支持fixed

Answer 2

当您将宽度或高度设置为100%时，它是其父元素大小的100%。因此，您需要在页面的所有内容周围添加一个元素，并在该元素中设置子元素的大小。

编辑：

如果将正文中最外层元素的高度设置为100%，则会发生什么情况取决于所使用的标记版本。在HTML中，body元素的父元素是viewport，默认情况下高度是100%，因此您的元素将是窗口的大小。在XHTML中，body元素的父元素是html元素，body元素的高度是页面中实际内容的高度。

Answer 3

如果元素不是绝对大小(例如600px)或包含在另一个大小的元素中，则100%宽度将是浏览器窗口的宽度。

页面的高度取决于内容在垂直方向上所占的空间大小。

因此，如果你想要一些东西覆盖一定的空间，创建一个元素(即<div>)，它的宽度和高度以像素或em为单位设置，那么它内部的元素设置为100%将填充到该位置。