【CSS】基本滚动显示｜如何使用 overflow-scroll
本文将解释如何使用 CSS 的 overflow-scroll 属性，在内容溢出时显示滚动条。当你想在固定大小的元素内显示内容并允许滚动时，它非常有用。
🔹 代码示例
<div class="container">
<div class="content">内容将在此显示。滚动条将会显示出来。</div>
</div>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
💻 完整的工作代码（复制并粘贴即可立即使用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>滚动示例</title>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">内容将在此显示。滚动条将会显示出来。</div>
</div>
</body>
</html>
🧩 应用与使用案例
overflow: scroll; 用于当内容溢出元素时显示滚动条。这对于确保用户可以查看固定大小元素中的所有内容非常有用。
📱 响应式设计
在响应式设计中，overflow: scroll; 通常用于在小屏幕设备（如智能手机或平板电脑）上显示滚动条。你还可以使用 @media 查询根据特定的屏幕尺寸来切换显示。
滚动条非常有用，特别是当你有一个很长的列表或复杂的内容时，因为它允许内容适应可用空间而不会影响其他元素的布局。
已复制！