DIV没有占据100％的视口高度
[英]DIV not taking 100% viewport height
问题描述
As you can see on this JSFiddle I try to get a DIV with a back ground picture taking 100% of the viewport head (the goal is to achieve something like this ) 
正如您在此JSFiddle上看到的那样，我尝试获得一个带背景图片的DIV，该图片拍摄了100％的视口头 （目标是实现这样的目标）
Unfortunately I've tried various things without success (ie change the height of element-1 to 100%, the method described here , etc.). 不幸的是，我尝试了各种尝试都没有成功（即，将element-1的高度更改为100％， 此处描述的方法等）。 What is the issue? 有什么问题
Many thanks 非常感谢
HTML 的HTML
<header>
<div class="element element-1"></div>
<div class="article-titles">
<h1 class="title">Head Text</h1>
<h2 class="subtitle">Sub-head text</h2>
</div>
</header>
CSS: CSS：
.element {
float: left;
width: 100%;
background-size: 100% auto;
background-attachment: fixed;
}
.element-1 {
position: relative;
z-index: 8;
height: 600px; <-- I've tried to change this to 100% but without success
border-top: 10px solid rgb(0, 0, 0);
background-image: url('http://placehold.it/650x450');
background-position: center center;
background-color: rgb(222, 222, 222);
}
2 个解决方案
解决方案1
0 已采纳 2014-04-06 17:55:16
Changing the height of .element-1 to 100% is only going to heighten it to 100% of the height of the parent element. 将.element-1的高度更改为100％只会将其提高到父元素高度的100％。
If you want the background image to cover the entire viewport I would attach it to <body> or <html> . 如果您希望背景图像覆盖整个视口，则可以将其附加到<body>或<html> 。
If you attach it to <html> it will cover the entire viewport and you won't have to (and should not in fact) set a height attribute on it. 如果将其附加到<html> ，它将覆盖整个视口，而您不必（实际上也不应该）在其上设置height属性。
解决方案2
0 2014-04-06 17:55:55
If backward compatibility is not one of the things you seek, you can use viewport units . 如果向后兼容性不是您要寻求的目标之一，则可以使用视口单位 。
Giving the .element-1 height 100vh makes the div take 100% of viewport (visible area)'s height. 将.element-1高度设置为100vh将使div占据视口（可见区域）高度的100％。
Updated Fiddle . 更新小提琴 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.