使Div覆盖整个页面（而不仅仅是视口）？

Question

使Div覆盖整个页面（而不仅仅是视口）？

110

我的问题可能相当普遍，但我尚未找到一个好的解决方案。我想让一个覆盖层div覆盖整个页面...而不仅仅是视口。我不明白为什么这样很难做到...我已经尝试将body和html高度设置为100％，但没有起作用。以下是我目前的代码：

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

如果有JavaScript的解决方案也可以，但是我更喜欢使用一些简单的CSS。

- Polaris878

可以在这里阅读更多信息：http://stackoverflow.com/questions/1938536/how-to-make-the-height-really-100/1938592#1938592 - Marco Demaio

这可以用jQuery真正实现吗？ - William Entriken

5个回答

18

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

- Nate Barr

2

目前最好的解决方案。您只需为 body 切换 "overlayed" 类，并使用该 className 将样式应用于 body。 - Sviatoslav Zalishchuk

4

请进一步解释这个答案。我不理解Sviatoslav的评论。 - Lonnie Best

1

首先，我认为您误解了视口的含义。视口是浏览器用于呈现网页的区域，您无法以任何方式构建您的网站来覆盖此区域。

其次，似乎您的叠加层div无法覆盖整个视口是因为您必须删除BODY和HTML上的所有边距。

尝试在样式表的顶部添加以下内容-它将重置所有元素上的所有边距和填充。这使得进一步开发更容易：

* { margin: 0; padding: 0; }

编辑：我现在更好地理解了你的问题。position:fixed;可能适合你，就像Jonathan Sampson所写的那样。

- Arve Systad

1

你不应该从所有元素中删除填充和边距。因为对于许多元素，例如按钮和表单输入框，重新添加这些属性可能非常费力。 - Sampson

1

在我看来，这只是一种非常简单的方法，可以使所有浏览器更加一致地处理所有元素。虽然在适应 IE5 之前可能不太适用于今天，但我仍然会将其作为样式表中编写的首要内容之一。 - Arve Systad

3

@Arve的回答接近正确，但最好使用经过时间考验的重置样式表。请查看http://meyerweb.com/eric/tools/css/reset/获取更多信息 - 我向您保证，您会喜欢它 :) - Sampson

我看到了它，我只是觉得它太大了 :) - Arve Systad

1

@Arve，复位并不是那么大的问题 - 尝试从 * {}完全恢复，你会发现更多 :) - Sampson

0

我遇到了一些麻烦，因为我不想将叠加层固定在一个位置，而是希望叠加层内的信息可以在文本上滚动。我使用了：

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

当然，中间的div需要一些内容和可能是透明灰色的背景，但我相信你能理解要点！

- Benjamin Vaughan

-7

我看了上面 Nate Barr 的回答，你似乎很喜欢。它似乎和更简单的没有太大区别。

html {background-color: grey}

- Justin Munce

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

视口是唯一重要的，但您可能希望即使在滚动时整个网站仍保持变暗。为此，您应该使用 position:fixed 而不是 position:absolute。Fixed 将保持元素在屏幕上静态显示，使整个页面看起来都被遮罩。

示例：http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>