HTML，CSS - 两个元素等于 100vh [重复]答案

【问题标题】：HTML, CSS - Two elements equals 100vh [duplicate]HTML，CSS - 两个元素等于 100vh [重复]
【发布时间】：2020-05-13 03:18:04
【问题描述】：

我想制作 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 像素，就像我的整个窗口一样。我想为这 2 个 div 制作 100vh。我做错了什么？

【问题讨论】：

注意：<img> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

标签： html css height display

【解决方案1】：

我们可以用 position: absolute

重叠我们的 div

.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 */
}

【讨论】：