Html 制作一个覆盖整个页面的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3250790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a div that covers the entire page
提问by Winforms
I would like to make a div that covers the entire page. I put a css style with height:100% but this covers only the viewable area. I want it to also cover the area when I scroll down.
我想做一个覆盖整个页面的div。我放置了一个高度为 100% 的 css 样式，但这仅涵盖了可见区域。当我向下滚动时，我希望它也覆盖该区域。
回答by Gabriele Petrioli
Use position:fixedthis way your div will remain over the whole viewable area continuously ..
使用position:fixed这种方式，您的 div 将持续保持在整个可视区域内..
give your div a class overlayand create the following rule in your CSS
给你的 div 一个类overlay并在你的 CSS 中创建以下规则
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
回答by Mohammad Usman
Following csswill do the required job.
以下css将完成所需的工作。
.overlay {
background: #fff;
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
Sometimes We want to cover page body with an overlay until all resources of web page are not downloaded completely. And they we fade out this overlay to show the complete content of our web page. Following example is a little modification of above answers, In this example we show an overlay covering full body of page with css3 animation:
有时我们想用覆盖层覆盖页面主体，直到网页的所有资源都没有完全下载。他们我们淡出这个叠加层以显示我们网页的完整内容。以下示例是对上述答案的一些修改，在此示例中，我们展示了一个覆盖整个页面的 css3 动画：
For more animations, visit 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>回答by Phliplip
html, body { height: 100%; }
#page { min-height: 100% }
回答by Vasil Dakov
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#test {
position:absolute;
display:block;
background:#ccc;
height:100%;
width:100%;
}
</style>
回答by exoboy
Here is a great article on how to do just that...
这是一篇关于如何做到这一点的好文章......
http://james.padolsey.com/javascript/get-document-height-cross-browser/
http://james.padolsey.com/javascript/get-document-height-cross-browser/
回答by coding_hero
I'm not sure what you're doing with this div, but you can style the element as well.
我不确定你在用这个 div 做什么，但你也可以设置元素的样式。
