div定位，高度为100％

Question

I want to have this layout like this

The nav should be fixed and the height of the div with the background-image 100%. Below the image I want to add the content.

My problem is - when i set the div of the image positioning 'relative' then i cant set the hight 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> 

Answer 1

Image Ratio with Padding

I think this is what you are looking for

.jumbotron {
  background-size: cover;
  background-image: url('http://www.apothekenkurier.de/uploads/pics/haut.rg.jpg');
  position: relative;
  width: 100%;
  height: 0; /* Changed */
  padding-bottom: 75%; /* height:width ratio */
}

Responsive elements that retain their aspect ratio