[英]DIV not taking 100% viewport height
正如您在此JSFiddle上看到的那样,我尝试获得一个带背景图片的DIV,该图片拍摄了100%的视口头 (目标是实现这样的目标)
不幸的是,我尝试了各种尝试都没有成功(即,将element-1的高度更改为100%, 此处描述的方法等)。 有什么问题
非常感谢
的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:
.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);
}
将.element-1
的高度更改为100%只会将其提高到父元素高度的100%。
如果您希望背景图像覆盖整个视口,则可以将其附加到<body>
或<html>
。
如果将其附加到<html>
,它将覆盖整个视口,而您不必(实际上也不应该)在其上设置height
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.