制作覆盖整个页面的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

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

Answer 4

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

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

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

Answer 6

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