使 DIV 覆盖 100% 的视口而不是 100% 的 Body
Posted
技术标签:
【中文标题】使 DIV 覆盖 100% 的视口而不是 100% 的 Body【英文标题】：Make DIV cover 100% of viewport instead of 100% of Body 【发布时间】：2011-05-19 14:53:49 【问题描述】：我的帖子是关于http://www.thepostboard.net
我需要让当前覆盖 100% 视口的黑匣子覆盖整个页面。只有当您的屏幕需要滚动条才能查看网站时，您才能注意到这一点——否则它看起来不错。
我将覆盖 div 设置为：
position: absolute;
height: 100%;
width: 100%;
我也将 body 设置为：
height: 100%;
margin: 0px 0px;
padding: 0px; 0px;
但出于某种原因，如果我在我的笔记本电脑上向下滚动，我会看到 DIV 的边缘，并且它下面没有任何东西被挡住。
这样做的目的是为网站创建一个自定义灯箱。我已禁用使框变暗的 javascript，以便您查看效果。
如何让它覆盖整个页面，而不仅仅是视口？
（我的笔记本电脑是 1366x768，所以大概你会在任何高度分辨率
【问题讨论】：
【参考方案1】：尝试添加这个 css：
html
height: 100%;
margin 0;
【讨论】：
这不起作用——我已经为上面的 CSS 设置了 HTML 和 BODY，抱歉我没有提到我也设置了 HTML。【参考方案2】：<div> 必须是
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: red;
然后它将停留在视口的尺寸内并随着滚动条“移动”。
编辑：如果<body> 的样式设置为，它只会覆盖整个视口
margin: 0;
padding: 0;
【讨论】：
【参考方案3】：这个解决方案最适合我：
#overlay
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
除了标签之外，不需要为任何其他元素设置样式。
【讨论】：
【参考方案4】：<!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>
【讨论】：
以上是关于使 DIV 覆盖 100% 的视口而不是 100% 的 Body的主要内容，如果未能解决你的问题，请参考以下文章
在 D3 v4 中使 SVG 容器具有父容器的 100% 宽度和高度（而不是像素）
如何让 div、header、container 等覆盖视口