100% 的内容，而不是使用 CSS 的浏览器高度答案

【问题标题】：100% of content, not of browser height using CSS100% 的内容，而不是使用 CSS 的浏览器高度
【发布时间】：2012-01-23 18:51:19
【问题描述】：

我有一个最小高度为 100% 的 div，其中包含我网站的所有内容：

#SiteWrap { min-height: 100%; width: 100%; }

上面的 div 包含所有内容 - 页眉、内容和页脚。

我需要做的是在顶部覆盖一个绝对定位的 div（具有半透明的 .png 背景），它基本上位于整个站点之上，有效地稍微“淡出它”。

我似乎无法让绝对 div 适合 100% 的网站内容。它只是跨越浏览器高度的 100%。当您向下滚动时，低于浏览器高度的内容底部部分不会被 div 跨越。

我已尝试将这个 div 放入 SiteWrap div 中，但它不起作用：

#LoginPopup-Background { position: absolute; width: 100%; min-height: 100%; height: 100%; z-index: 1100; background-color: #F39C11; }

（背景颜色用于测试目的）。

有什么想法吗？

【问题讨论】：

使用Javascript（document.getElementById('#LoginPopup-Background').style.height = document.body.offsetHeight + 'px'）设置弹窗高度，或者使用position: fixed代替absolute，这样会有登录框不随body滚动的副作用。跨度>
啊，完美！没有副作用，我不希望登录框随着正文滚动。谢谢布莱斯！

标签： html css

【解决方案1】：

使用position: fixed 代替position: absolute。登录仍然不是文档的 100% 大小，但即使您滚动，它也会始终覆盖内容。

同样对于 IE，您应该始终设置 top: 0; left: 0 以防止出现一些奇怪的布局错误。

【讨论】：