div positioning with 100% height

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