正如您在 this JSFiddle 上看到的那样我尝试获得一个 DIV，背景图片占据视口(viewport)头部的 100%(目标是实现 something like this)
不幸的是，我尝试了各种方法都没有成功(例如，将 element-1 的高度更改为 100%，描述的方法是 here，等等)。 什么问题？
非常感谢
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%。
如果您希望背景图像覆盖整个视口(viewport)，我会将其附加到 <body>或 <html> .
如果将其附加到 <html>它将覆盖整个视口(viewport)，您不必(实际上不应该)设置 height属性。
关于html - DIV 未采用 100% 视口(viewport)高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22897645/