I would like to achieve the following layout:
The navigation should be fixed at the top, and the height of the div with the background image should be 100%. I want to place content below the image.
My issue is that when I set the positioning of the image's div to 'relative', I am unable to set the height to 100%
.container ul {
margin-left: 50px;
}
.nav {
background-color: #D3D3D3;
height: 40px;
position: fixed;
width: 100%;
z-index: 1;
opacity: 0.6;
}
.nav li {
display: inline;
}
a {
color: white;
text-transform: uppercase;
text-decoration: none;
padding-left: 20px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-weight: bold;
}
.jumbotron {
background-size: cover;
background-image: url('http://www.apothekenkurier.de/uploads/pics/haut.rg.jpg');
position: relative;
width: 100%;
height: 100%;
}
.content {
height: 100px;
background-color: gray;
}<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
</div>
<div class="content">
</div>