Bootstrap 5固定高度容器，支持滚动内容

Bootstrap 5 是一个流行的前端框架，用于快速构建响应式网站和应用程序。在 Bootstrap 5 中，固定高度容器并支持滚动内容可以通过以下几种方式实现：

基础概念

固定高度容器：指容器的高度是固定的，不会随着内容的多少而改变。
滚动内容：当内容超出容器的高度时，可以通过滚动条查看隐藏的内容。

类型与应用场景

类型：
- 固定像素高度
- 百分比高度
- 媒体查询动态调整高度
应用场景：
- 侧边栏导航
- 消息列表
- 配置面板

实现方法

以下是使用 Bootstrap 5 和一些自定义 CSS 来创建固定高度容器并支持滚动内容的示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Height Container with Scroll</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .scrollable-container {
      height: 300px; /* 固定高度 */
      overflow-y: auto; /* 启用垂直滚动 */
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="scrollable-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
      <!-- 更多内容 -->
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CSS 样式

.scrollable-container {
  height: 300px; /* 固定高度 */
  overflow-y: auto; /* 启用垂直滚动 */
  border: 1px solid #ccc;
  padding: 10px;
}

可能遇到的问题及解决方法

滚动条不显示：
- 原因：容器高度设置不正确或内容未超出容器高度。
- 解决方法：确保容器高度固定且内容足够多以触发滚动条。

滚动条样式不符合预期：
- 原因：浏览器默认滚动条样式影响。
- 解决方法：可以使用自定义滚动条样式，例如使用 ::-webkit-scrollbar 伪元素。

.scrollable-container::-webkit-scrollbar {
  width: 10px;
}

.scrollable-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

通过以上方法，你可以轻松地在 Bootstrap 5 中创建一个固定高度且支持滚动内容的容器。