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

我想制作一个覆盖整个页面的div。 我把高度：100％的CSS样式，但这只覆盖可视区域。 当我向下滚动时，我也希望它能覆盖这个区域。

Answer 1

使用position:fixed这种方式你的div将继续在整个可视区域。

给你的div overlay一个类，并在你的CSS中创build下面的规则

 .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

  <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 3

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

Answer 4

这里是一个伟大的文章，如何做到这一点…

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

Answer 5

以下css将完成所需的工作。

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

有时我们想用覆盖来覆盖页面主体，直到网页的所有资源没有被完全下载。 而他们我们淡出这个覆盖显示我们的网页的完整内容。 下面的例子是上面的答案的一些修改，在这个例子中，我们显示覆盖整个页面与css3animation覆盖：

有关更多animation，请访问此处

 $(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 6

我不知道你在用这个div做什么，但是你也可以devise元素的样式。