🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：固定高度并启用滚动

📝 使用场景

当你希望限制元素高度，并在内容溢出时启用滚动（如长文本、聊天记录、日志等）时，可以使用该模板。非常适合用于需要可滚动区域的情况。

📘 说明

通过设置 max-height 限制最大高度，再配合 overflow: auto;，就能实现内容区域的滚动效果。

✅ 示例

这是一个可滚动区域。

随着行数的增加，会自动出现滚动条。

示例：1

示例：2

示例：3

示例：4

示例：5

示例：6

示例：7

📄 代码（部分）

<style>
.scroll-box {
  max-height: 150px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #fafafa;
}
</style>

<div class="scroll-box">
  <p>滚动区域的内容</p>
</div>

📦 代码（完整HTML）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>固定高度并启用滚动</title>
  <style>
    .scroll-box {
      max-height: 150px;
      overflow: auto;
      border: 1px solid #ccc;
      padding: 1rem;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
  <div class="scroll-box">
    <p>这是一个可滚动区域。</p>
    <p>内容增多时将启用滚动。</p>
    <p>示例：1</p>
    <p>示例：2</p>
    <p>示例：3</p>
    <p>示例：4</p>
  </div>
</body>
</html>
已复制！

🧩 应用与使用方法

这个滚动框模板可以应用于多种场景。通过调整 max-height 的数值，可以根据需要更改可视区域的高度。例如，在移动端显示时设置为 max-height: 300px;，或者在紧凑型界面中设置为 max-height: 100px;，可以灵活应对不同需求。

📱 响应式设计要点

结合媒体查询可以为不同设备设置最佳高度。例如，使用 @media (max-width: 768px) { .scroll-box { max-height: 200px; } }，即可在手机显示时自动调整高度。

🎨 设计自定义

如果希望修改滚动条的外观，可以使用 ::-webkit-scrollbar 伪元素。例如，.scroll-box::-webkit-scrollbar { width: 8px; } 可以调整滚动条的宽度。你也可以自定义背景颜色、圆角等样式。

注意：如果使用 overflow: scroll; 而不是 overflow: auto;，即使内容很少也会始终显示滚动条。请根据实际需求选择使用方式。

此技巧可广泛应用于侧边栏导航、仪表盘小组件、模态窗口中的长文本显示等组件，特别适用于空间有限的场景中，需要高效展示内容的情况。

相关模板