CSS 如何使一个 div 垂直滚动

在本文中，我们将介绍如何使用 CSS 来使一个 div 在垂直方向上实现滚动效果。在网页开发中，有时我们会遇到需要显示大量内容的情况，而且这些内容的高度超过了父容器的高度，这时我们就可以使用垂直滚动来解决这个问题。

阅读更多：CSS 教程

使用 CSS 的 overflow 属性

CSS 的 overflow 属性可以用来控制元素内容超过容器时的处理方式。overflow 属性有以下几个取值：

visible：默认值，元素内容不会被修剪，会呈现在容器外部；
hidden：元素内容超出容器范围时，会被修剪，不呈现在容器外部；
scroll：元素内容超出容器范围时，显示滚动条，用户可以通过滚动条查看所有内容；
auto：元素内容超出容器范围时，根据内容的长度来决定是否显示滚动条，滚动条仅在内容超出时出现。

为了实现垂直滚动，我们需要将一个 div 的高度固定，并设置其 overflow 属性的值为 scroll 或 auto。

下面是一个示例，我们创建了一个具有固定高度的 div，并设置了 overflow-y: scroll; 属性来实现垂直滚动效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .scrollable-div {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div class="scrollable-div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec scelerisque arcu. Nam commodo ultricies ligula nec luctus. Suspendisse egestas lacus in rutrum dictum. Vestibulum maximus urna velit, a blandit nibh dapibus eu. Proin et sapien eu ipsum fermentum vulputate. Duis maximus erat vitae massa euismod ultrices. Nam augue justo, interdum et massa nec, pellentesque congue diam. Etiam tristique malesuada ligula, in porta ante. Nullam finibus augue magna, et mattis felis efficitur nec. Praesent eu dolor nec sem tristique pretium in sed metus. Aenean finibus efficitur efficitur.</p>
  </div>
</body>
</html>

在上述示例中，我们创建了一个具有 200px 高度的 div，其中包含了一段 lorem ipsum 文本。当文本内容超过 200px 时，div 将显示垂直滚动条，用户可以滚动条来浏览全部内容。

使用 CSS 的 flexbox 布局

除了使用 overflow 属性来实现垂直滚动外，我们还可以使用 CSS 的 flexbox 布局来实现同样的效果。flexbox 是 CSS3 中新加入的一种布局方式，可以方便地对元素进行对齐、排列等操作。

下面是一个示例，我们使用 flexbox 布局实现了一个固定高度的容器，并在容器内部创建了一个溢出内容的 div，通过设置 flex-direction: column; 和 overflow-y: auto; 属性来实现垂直滚动效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 200px;
    }

    .scrollable-div {
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="scrollable-div">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec scelerisque arcu. Nam commodo ultricies ligula nec luctus. Suspendisse egestas lacus in rutrum dictum. Vestibulum maximus urna velit, a blandit nibh dapibus eu. Proin et sapien eu ipsum fermentum vulputate. Duis maximus erat vitae massa euismod ultrices. Nam augue justo, interdum et massa nec, pellentesque congue diam. Etiam tristique malesuada ligula, in porta ante. Nullam finibus augue magna, et mattis felis efficitur nec. Praesent eu dolor nec sem tristique pretium in sed metus. Aenean finibus efficitur efficitur.</p>
    </div>
  </div>
</body>
</html>

在上述示例中，我们创建了一个具有 200px 高度的容器，并设置了 display: flex;、flex-direction: column; 属性来让容器内的元素垂直排列。通过将内容溢出的 div 设置 overflow-y: auto;，当内容超过容器高度时，会自动出现垂直滚动条。