CSS 使用 CSS 实现垂直堆叠的三个 DIV，其中中间区域可以滚动

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 实现垂直堆叠的三个 DIV，其中中间区域可以滚动。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用 Flexbox 布局实现三个 DIV 的垂直堆叠

Flexbox 是 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS3 中的一种布局模式，它提供了强大的布局能力。我们可以利用 Flexbox 垂直堆叠三个 DIV，并使中间区域可以滚动。

首先，我们在 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 中创建三个 DIV，并给它们添加相应的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 类，如下所示：

<div class="container">
  <div class="div-one">
    <p>Content for DIV One</p>
  </div>
  <div class="div-two">
    <p>Content for DIV Two</p>
  </div>
  <div class="div-three">
    <p>Content for DIV Three</p>
  </div>
</div>

接下来，我们为容器设置 Flexbox 布局，使其垂直堆叠子元素。在 CSS 中，我们可以使用 display: flex 属性来实现：

.container {
  display: flex;
  flex-direction: column;
}

.div-one, .div-two, .div-three {
  flex: 1;
}

这里，display: flex 将容器设置为 Flexbox 布局，flex-direction: column 表示子元素垂直排列。通过为子元素添加 flex: 1 属性，我们使它们平分容器的高度，实现垂直堆叠。

使用 Overflow 属性实现中间区域的滚动

现在，我们已经实现了三个 DIV 的垂直堆叠。接下来，我们要使中间的 DIV 具有滚动的能力。

为了实现滚动效果，我们可以使用 CSS 的 overflow 属性。在这种情况下，我们希望中间的 DIV 在内容溢出时显示滚动条。因此，我们可以为 .div-two 添加以下样式：

.div-two {
  overflow-y: scroll;
}

overflow-y: scroll 表示在内容溢出时显示垂直滚动条。

示例

下面是一个完整示例，展示了如何使用 Flexbox 和 Overflow 属性实现垂直堆叠的三个 DIV，其中中间区域可以滚动：

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 400px;
  }

  .div-one, .div-two, .div-three {
    border: 1px solid black;
    flex: 1;
    padding: 10px;
  }

  .div-two {
    overflow-y: scroll;
  }
</style>

<div class="container">
  <div class="div-one">
    <p>Content for DIV One</p>
  </div>
  <div class="div-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut ex nec nisl semper tempor eget sit amet nibh. Nullam gravida pellentesque sagittis. Quisque fermentum commodo sollicitudin. Phasellus ultricies congue sem, vitae interdum risus eleifend eget. Curabitur aliquet libero vitae elit rhoncus, id tincidunt ante iaculis. Aliquam lacus est, posuere non tellus sit amet, rutrum gravida libero. Nulla hendrerit gravida arcu et semper.</p>
  </div>
  <div class="div-three">
    <p>Content for DIV Three</p>
  </div>
</div>

在上述示例中，我们通过设置 .div-two 的高度限制为容器的高度来触发滚动效果。