CSS 如何创建一个垂直滚动的 Div 标签

在本文中，我们将介绍如何使用 CSS 创建一个垂直滚动的 Div 标签。垂直滚动的 Div 标签可以用来显示大量内容，并在内容超出可视区域时提供滚动功能。我们将使用 CSS 的属性和样式来实现这个效果。

阅读更多：CSS 教程

使用 overflow 属性

CSS 的 overflow 属性可以用来控制元素内容超出边界时的处理方式。在创建垂直滚动的 Div 标签时，我们可以将 overflow 属性设置为 auto 或 scroll。这将在内容超出可视区域时显示滚动条。

示例代码如下：

div {
  width: 300px;
  height: 200px;
  overflow-y: auto;
}

在上面的示例中，我们创建了一个宽度为 300 像素，高度为 200 像素的 Div 标签，并将 overflow-y 属性设置为 auto。这将在内容超出可视区域时显示垂直滚动条。

使用 max-height 属性

除了使用 overflow 属性，我们还可以使用 max-height 属性来创建垂直滚动的 Div 标签。max-height 属性用于设置元素的最大高度，超出该高度的内容将被隐藏，并提供滚动条以便查看隐藏的内容。

示例代码如下：

div {
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
}

在上面的示例中，我们创建了一个宽度为 300 像素，最大高度为 200 像素的 Div 标签，并将 overflow-y 属性设置为 auto。这将在内容超出最大高度时显示垂直滚动条。

使用 flexbox 布局

另一种创建垂直滚动的 Div 标签的方法是使用 flexbox 布局。flexbox 布局是一种 CSS 3 的布局模型，可以轻松地实现元素的自适应和对齐。

示例代码如下：

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  overflow-y: auto;
}

.item {
  flex: 1;
}

在上面的示例中，我们创建了一个父容器（class 为 container）和子元素（class 为 item）。通过将父容器的 display 属性设置为 flex，我们可以将子元素按垂直方向排列。然后，我们将父容器的高度设置为 200 像素，并将 overflow-y 属性设置为 auto，以在内容超出高度时显示垂直滚动条。