HTML, CSS - 两个元素等于 100vh

Question

我想制作div（这将是容器）。在这个 div 中，我有导航栏和另一个 div （这是背景 img）。我的容器有 100vh。导航栏没有高度。现在我想"rest of this 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 像素，就像我的整个背景 window 一样。我想为这 2 div 全部制作 100vh。我做错了什么？

Answer 1

我们可以将 div 与 position: 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 */
}

HTML, CSS - 两个元素等于 100vh

HTML, CSS - Two elements equals 100vh

html

css

height

display