html - 100%高度的div定位

Question

我想要这样的布局

nav 应该是固定的，div 的高度和 background-image 为 100%。在图片下方我想添加内容。

我的问题是 - 当我将图像定位的 div 设置为“相对”时，我无法将高度设置为 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

带填充的图像比例

我想这就是你要找的

.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