如何使用 CSS 根据页面高度在页面上设置叠加层答案

【问题标题】：How to set overlay on a page according to page height using CSS如何使用 CSS 根据页面高度在页面上设置叠加层
【发布时间】：2011-03-22 13:07:00
【问题描述】：

在我的网站中，我想在禁用 JavaScript 时在页面上方设置叠加层。由于每个页面的高度不同，所以我无法根据页面高度设置叠加层。目前我正在做的是我我将最大高度设置为 2000px，如下所示：

.overLay { 背景颜色：#666666; 高度：2000px；左：0；位置：绝对；顶部：0；宽度：100%； z-索引：1003；不透明度：0.5； }

但这不是我想要的。因为有些页面的高度比提到的叠加高度要小得多，而有些页面的高度要高，所以在这种情况下叠加效果不是很好。我想根据页面高度设置叠加高度。谁能告诉我如何在不使用 JavaScript 的情况下实现这一目标？

【问题讨论】：

标签： asp.net css

【解决方案1】：

这可能会产生其他副作用，具体取决于您的内容或其他...但您也许可以使用

body {
  overflow:hidden;
}

但这当然意味着如果内容比页面长，页面将不会滚动......但它确实会阻止某些页面仅仅因为覆盖而变得更长

【讨论】：

【解决方案2】：

body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

这应该可行。覆盖应该是<div>。

【讨论】：