DIV not taking 100% viewport height
Question
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 )
Unfortunately I've tried various things without success (ie change the height of element-1 to 100%, the method described here , etc.). What is the issue?
Many thanks
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);
}
2 answers
solution1
0 ACCPTED 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.
If you want the background image to cover the entire viewport I would attach it to <body> or <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.
solution2
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.