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

93

所以我有一个我认为很普遍的问题，但是我还没有找到一个好的解决方案。我想使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。

html css

— 北极星878
source

能读也更这里：stackoverflow.com/questions/1938536/...

— 马尔科Demaio

可以使用jQuery真正做到这一点吗？

— William Entriken '16

224

视口很重要，但是您可能希望整个网站即使在滚动时也保持黑暗。为此，您要使用position:fixed代替position:absolute。固定将使元素在滚动时在屏幕上保持静态，从而给人留下整个身体变暗的印象。

示例：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>

— 桑普森
source

3

我可能错了，但是会在IE6中定位固定工作吗？我知道大概没有人再关心IE6了。

— Marco Demaio 2010年

29

@Marco不确定。老实说，如果没有明确要求支持10岁以上的浏览器，我就不再烦恼了：）

— Sampson 2010年

5

那么你们如何在移动设备上做到这一点？bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy 2012年

3

+1谢谢！我通过在叠加层上方添加一个弹出窗口来扩展您的示例：jsbin.com/okabo3/740

— kol

我遇到的这个问题（很多插件都在使用）是，当您单击<select>iOS中的一个元素时，它会移动整个视口，并基本上破坏了所有内容。固定元素移动，不应该滚动的内容滚动等等

— 。– billynoah

15

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

— 内特·巴尔
source

2

最好的解决方案。您只需切换主体的“覆盖”类，然后使用该className将以上样式应用于主体。

— Sviatoslav Zalishchuk

3

请进一步解释此答案。我不理解斯维亚托斯拉夫的评论。

— Lonnie Best

1

首先，我认为您误解了视口是什么。视口是浏览器用来渲染网页的区域，您不能以任何方式构建网站以任何方式覆盖此区域。

其次，您的overlay-div不能覆盖整个视口的原因似乎是因为您必须删除BODY和HTML上的所有边距。

尝试将其添加到样式表的顶部-重置所有元素上的所有边距和填充。使进一步的开发变得容易：

* { margin: 0; padding: 0; }

编辑：我只是更好地理解了你的问题。 Position: fixed; 正如乔纳森·桑普森（Jonathan Sampson）所写，这可能会为您工作。

— Arve Systad
source

1

您不应该删除所有内容的填充和边距。要获得许多诸如按钮和表单输入之类的元素，可能真的很费力。

— 桑普森

1

我认为，这只是在所有浏览器中将所有内容都视为相同的简单方法。今天可能不适用于适应IE5之前的情况，但我仍然将它作为我在样式表中写的第一件事之一。

— 2010年

3

@Arve它可以使您接近，但是最好使用经过时间测试的重置表。请查看meyerweb.com/eric/tools/css/reset了解更多信息-您一定会喜欢的，我向您保证：)

— Sampson 2010年

我已经看过了，只是觉得它太大了：)

— Arve Systad 2010年

1

@Arve重置没有那么大-尝试从中完全恢复*{}，您会看到更多:)

— Sampson 2010年

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需要一些内容，并且可能需要透明的灰色背景，但是我敢肯定您的要旨！

— 本杰明·沃恩
source

-6

我看了上面内特·巴尔（Nate Barr）的回答，您似乎很喜欢。看起来和更简单的没有什么不同

html {background-color: grey}

— 贾斯汀·芒斯（Justin Munce）
source