CSS 中的 overflow 属性用于控制超出元素边界的内容的处理方式。它可以选择隐藏多余的内容，或者添加滚动条，以便用户可以在不离开当前视图的情况下滚动查看更多内容。这对于在 Web 应用程序中显示大量内容（如文本、图像或表格）非常有帮助。
通过使用下面给出的方法，我们可以使 div 具有垂直滚动的功能。
1. 使用 overflow-x 和 overflow-y 属性
INLINECODE786b9899 和 INLINECODEbcf64739 属性分别用于控制水平和方向的滚动。
现在，让我们通过一个示例来理解：
/* 具有固定尺寸的容器 */
.container {
width: 300px;
height: 150px;
border: 2px solid #000;
margin: 20px;
padding: 10px;
overflow-x: scroll; /* 水平滚动 */
overflow-y: scroll; /* 垂直滚动 */
}
.content {
width: 500px;
height: 300px;
background-color: rgb(143, 226, 143);
padding: 20px;
}
这是一个水平溢出 (overflow-x) 和垂直溢出 (overflow-y) 实际效果的示例。
水平滚动以查看向右溢出的内容。
垂直滚动以查看向下溢出的内容。
输出：
在本示例中：
- 部分内的 标签包含了关于溢出行为的 CSS 样式。
- 容器的尺寸被设定为 300px 乘 150px，而其内部的内容故意设置得更大，从而导致水平和垂直方向上的溢出。
**overflow-x: scroll**确保启用了水平滚动。**overflow-y: scroll**在内容溢出时启用垂直滚动。
2. 使用 overflow:auto 属性
overflow: auto 属性仅在内容无法放入框内时才添加滚动条。由于文本比框的高度更长，因此会出现垂直滚动条，方便您滚动并轻松阅读所有内容。
现在，让我们通过一个示例来理解：
.container {
margin: 5px;
padding: 5px;
background-color: rgb(143, 226, 143);
width: 300px;
height: 110px;
overflow: auto;
}
HTML 是 Web 的语言，数十亿网站使用它来创建
您每天看到的页面。想要
从零开始学习 HTML 并制作
您自己的网页吗？这个 HTML 教程是
您的一站式目的地！
为了向您展示 HTML 有多有趣和简单，
我们提供了一个经典示例
即用 HTML 编写 “Hello, World!”
输出：
!Making-a-div-vertically-scrollable-using-CSS使用 CSS 使 div 垂直滚动
在本示例中：
- INLINECODE3c1dc148 被赋予固定的宽度 INLINECODE2b64d80f 和高度 INLINECODE30a7f7eb，并设置了 INLINECODE6e8d30b2 和
padding以在容器内部和周围添加空间。 - INLINECODE4c5bca40 属性确保仅当 INLINECODE533e1599 内的内容超过容器的设定尺寸时才会显示滚动条。如果内容垂直溢出，它会显示垂直滚动条。
- INLINECODEa5aeab07 的背景颜色设置为 INLINECODEc261807b，赋予其浅绿色调以便与其他内容区分开来。
- 在这种垂直溢出的情况下，当内容超过容器的高度时，
overflow: auto;确保显示滚动条，以便轻松浏览内容。
结论
使用 CSS 使 div 具有垂直滚动功能，是管理超出容器高度的内容的一种简单有效的方法。通过设置固定高度并使用 overflow-y 属性，我们可以轻松实现垂直滚动。此外，我们还可以通过平滑滚动和自定义滚动条样式来增强用户体验。通过遵循最佳实践并考虑响应式设计，我们可以创建出在所有设备上都能良好工作的可滚动容器。