制作一个覆盖整个页面的div

Question

我想创建一个涵盖整个页面的div。我把高度为100％的css风格但是这只覆盖了可视区域。当我向下滚动时，我希望它也覆盖该区域。

Answer 1

以这种方式使用position:fixed你的div将继续在整个可视区域内保留..

为你的div提供一个班级overlay并在你的CSS中创建以下规则

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

演示：http://www.jsfiddle.net/TtL7R/1/

Answer 2

html, body { height: 100%; }
#page { min-height: 100% }

Answer 3

 <style type="text/css">
 html, body {
    margin:0;
    padding:0;
    height:100%; 
 } 
 #test { 
    position:absolute; 
    display:block;
    background:#ccc; 
    height:100%; 
    width:100%;
 }
 </style>

Answer 4

关注css将完成所需的工作。

.overlay {
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

有时我们希望覆盖页面正文，直到所有网页资源都没有完全下载为止。我们淡出这个叠加层以显示我们网页的完整内容。以下示例是对上述答案的一点修改，在此示例中，我们使用css3动画显示覆盖整个页面的叠加层：

要获得更多动画，请访问Here

$(window).load(function() {
    $('.overlay').delay(1000).fadeOut(800);
});

.overlay {
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
}
.loading-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
  background-color: #3498db;
  animation-delay: 0;
}
.loading-bar:nth-child(2) {
  background-color: #c0392b;
  animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
  background-color: #f1c40f;
  animation-delay: .18s;
}
.loading-bar:nth-child(4) {
  background-color: #27ae60;
  animation-delay: .27s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay">
  <div class="loading">
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>

Answer 5

这是一篇关于如何做到这一点的精彩文章......

http://james.padolsey.com/javascript/get-document-height-cross-browser/

Answer 6

我不确定你对这个div做了什么，但你也可以设置元素的样式。