代码之家 › 专栏 › 技术社区 › DigitalZebra

使Div覆盖整个页面(不仅仅是视口)?

css html

DigitalZebra · 技术社区 · 16 年前

所以我有一个问题,我认为是很常见的,但我还没有找到一个很好的解决办法。我想做一个覆盖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。

4 回复 | 直到 16 年前

240

Sampson 14 年前

视口才是最重要的,但您可能希望整个网站即使在滚动时也保持黑暗。为此,您要使用 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>

Nate Barr 13 年前

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

Arve Systad 16 年前

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

整个视口 是因为必须删除正文和HTML上的所有页边距。

试着在样式表的顶部添加这个-它会重置所有元素上的所有边距和填充。使进一步开发更容易:

* { margin: 0; padding: 0; }

Position: fixed; 就像乔纳森·桑普森写的那样,你可能会成功的。

Peter O. Manuel Pinto 6 年前

我有相当多的麻烦,因为我不想修复的地方,因为我想在覆盖内的信息是滚动的文字覆盖。我用过:

<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需要一些内容,可能还有一个透明的灰色背景,但我相信你明白要点了!

-6

Justin Munce 11 年前

我看了内特·巴尔上面的回答,你似乎很喜欢。它看起来和简单的没什么区别

html {background-color: grey}