我想制作div(这将是容器(。在这个div 中，我有导航栏和另一个div(这是背景 img(。我的容器有 100vh。导航栏没有高度。现在我想让"这个 100vh 的其余部分"成为这个背景div。我的主要 html 看起来像：
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="head-container">
<header>
<img class="logo" src="css/873438.jpg" alt='logo' />
<nav>
<ul class="nav_links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Add post</button></a>
</header>
<div class="background">
</div>
</div>
</body>
</html>
现在我的 CSS 文件
*{
margin: 0;
padding: 0;
}
.head-container{
height: 100%;
width: 100%;
}
.background {
height: 100vh;
background-color: gray;
}
背景div 有 969 像素的高度，就像我的整个窗口一样。我想为整个 100 个div 制作 2vh。我做错了什么？
我们可以将div 与位置重叠：absolute
.background {
height: 100vh;
background-color: gray;
position: absolute; /* To over lap the page */
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1; /* To put image to background */
}