javascript 使 DIV 覆盖 100% 的视口而不是 100% 的 Body
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4343612/
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
Make DIV cover 100% of viewport instead of 100% of Body
提问by TigerTrussell
My post is in regards to http://www.thepostboard.net
我的帖子是关于http://www.thepostboard.net
I need to make the black box that is currently covering 100% of the viewport cover the entire page instead. You'll only be able to notice this if your screen needs a scrollbar to view the website--otherwise it looks fine.
我需要让当前覆盖 100% 视口的黑框覆盖整个页面。只有当您的屏幕需要滚动条才能查看网站时，您才能注意到这一点——否则看起来不错。
I have the overlaying div set to:
我将覆盖的 div 设置为：
position: absolute;
height: 100%;
width: 100%;
I also have body set to:
我也将身体设置为：
height: 100%;
margin: 0px 0px;
padding: 0px; 0px;
But for some reason on my laptop if I scroll down I see the edge of the DIV and nothing is blocked off underneath it.
但是出于某种原因，在我的笔记本电脑上，如果我向下滚动，我会看到 DIV 的边缘并且它下面没有任何东西被阻挡。
The purpose of this is to create a custom lightbox for the website. I have disabled the Javascript that dims the box so you can see the effect.
这样做的目的是为网站创建自定义灯箱。我已禁用使框变暗的 Javascript，以便您可以看到效果。
How do I make it cover the entire page, not just the viewport?
如何让它覆盖整个页面，而不仅仅是视口？
(My laptop is a 1366x768, so presumably you'd see it on anything with a height resolution <= 760).
（我的笔记本电脑是 1366x768，所以大概你会在任何高度分辨率 <= 760 的东西上看到它）。
回答by Linus Kleen
The <div>needs to be
该<div>需求是
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: red;
It will then stay within the viewport's dimensions and "travel" with the scrollbar.
然后它将保持在视口的尺寸内并与滚动条一起“移动”。
Edit:it will only cover the entire viewport if <body>is styled to
编辑：如果<body>样式设置为，它只会覆盖整个视口
margin: 0;
padding: 0;
回答by dtbarne
This solution has worked best for me:
这个解决方案对我来说效果最好：
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
No need to style any other elements except the tag.
除了标签之外，无需设置任何其他元素的样式。
回答by blayderunner123
<!DOCTYPE html>
<html>
<head>
<title>image background test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale = 1.0, user-scalable = no, maximum-scale=1">
<style>
body{
margin:0;
padding:0;
width:100%;
height:100%;
max-width:100%;
overflow-x:hidden;
}
article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav {
display: block;
width:auto;
height:100%;
}
.main{
position:static;/* Don't Change - Positioning */
top:0;
left:0;
height:100%;
max-height:100%;
}
.background{
position:absolute;/* Don't Change - Positioning */
top:0;
left:0;
right:0;
bottom:0;
background:url('images/beach.jpg');
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
margin:0;
}
@media (min-aspect-ratio: 16/9){
.background{
position:absolute;/* Don't Change - Positioning */
width:100%;
height:auto; /* actually taller than viewport */
background:url('images/beach.jpg');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin:0;
}
}
@media (max-aspect-ratio: 16/9){
.background{
position:absolute;/* Don't Change - Positioning */
width:auto; /* actually wider than viewport */
height:100%;
background:url('images/beach.jpg');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin:0;
}
}
/* If supporting object-fit, overriding 'class="main"' default: */
@supports (object-fit: cover){
.background{
background:url('images/beach.jpg');
background-position:center center;
margin:0;
top: 0;
left: 0;
right: 0;
object-fit: cover;
}
}
section h1{
width:80%;
height:auto;
background:#ff0000;
margin:20% auto;
text-align:center;
color:#ffffff;
font-size:200%;
font-weight:800;
line-height:200%;
}
h2{
text-align:center;
margin:0 auto;
padding:20%;
font-size:200%;
line-height:100%;
font-weight:800;
}
</style>
</head>
<body>
<div class="main">
<div class="background">
<section>
<h1>Image fits to viewport</h1>
</section>
</div>
</div>
<h2>Some Text Here to display that image<br>is fixed toviewport</h2>
</body>
</html>
回答by Pascal H.
try to add this css:
尝试添加这个css：
html {
height: 100%;
margin 0;
}
