CSS 两个 div 元素中的下层元素高度随浏览器窗口自适应调整

在本文中，我们将介绍如何使用 CSS 实现两个 div 元素中的下层元素高度随浏览器窗口自适应调整的效果。

阅读更多：CSS 教程

使用 CSS 中的 Flexbox 布局

Flexbox 是 CSS3 中提供的一种强大的布局模型，它允许我们轻松地创建灵活的布局。在这种布局模型下，我们可以通过设置 flex 容器的属性来实现两个 div 元素中的下层元素高度随浏览器窗口自适应调整。

首先，我们需要在父元素上设置 display 为 flex，这将将其设置为一个 flex 容器。然后，我们可以使用 flex-direction 属性来指定子元素的排列方向。在本例中，我们将设置为垂直方向，即从上到下排列。

接下来，我们将设置下层元素的高度为100%，这样它就会自动占据剩余的空间。我们可以使用 flex 属性来控制上层元素的高度，根据需要进行调整。

下面是一个简单示例：

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .top {
    flex: 1;
    background-color: #f3f3f3;
  }

  .bottom {
    height: 100%;
    background-color: #ccc;
  }
</style>

<div class="container">
  <div class="top">
    <!-- 上层元素的内容 -->
  </div>
  <div class="bottom">
    <!-- 下层元素的内容 -->
  </div>
</div>

在上面的示例中，container 类指定了一个 flex 容器，并设置其高度为浏览器窗口高度的百分比（100vh）。.top 类和 .bottom 类分别用于表示上层元素和下层元素。

在 .top 类中，我们使用 flex: 1 来设置上层元素的高度自动占据剩余空间。在下层元素的类 .bottom 中，我们将其高度设置为 100%，使其占据剩余空间。

这样，无论浏览器窗口的高度如何变化，下层元素的高度都会自动调整。

使用绝对定位

除了使用 Flexbox 布局，我们还可以使用绝对定位来实现下层元素的高度自适应调整。

在这种方法中，我们将下层元素使用绝对定位，使其相对于父元素进行定位。然后，我们使用 top 和 bottom 属性来控制其位置，并通过调整 bottom 属性的值来实现下层元素的高度自动调整。

下面是一个示例：

<style>
  .container {
    position: relative;
    height: 100vh;
    background-color: #f3f3f3;
  }

  .bottom {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #ccc;
  }
</style>

<div class="container">
  <!-- 上层元素的内容 -->
  <div class="bottom">
    <!-- 下层元素的内容 -->
  </div>
</div>

在上面的示例中，.container 类表示父元素，我们使用 position: relative 来设置其相对定位，并设置其高度为浏览器窗口高度的百分比（100vh）。

然后，我们在下层元素的类 .bottom 中使用绝对定位（position: absolute），并设置 top 和 bottom 的值都为 0。这样，下层元素会相对于父元素的顶部和底部进行定位，并且其高度会自动调整以适应剩余的空间。