css 超出高度显示 滚动条

在CSS中，当元素的内容超出其容器的高度时，滚动条会自动出现，让用户能够浏览超出的部分。以下是几种常见的实现方式：

1. **overflow: auto;** 这是最常用的滚动方式。当内容溢出（`overflow` 属性默认值为 `visible`），设置为 `auto` 后，如果内容超过容器高度，就会出现水平和垂直滚动条。

.container {
   overflow: auto;
   height: 200px; /* 容器高度限制 */
}

2. **overflow-y: scroll;** 如果只想显示垂直滚动条，可以只针对垂直方向设置 `scroll`。

.container {
   overflow-y: scroll;
   height: 200px;
}

3. **overflow-x: scroll;** 对于只希望水平滚动的情况，可以单独设置 `overflow-x`。

.container {
   overflow-x: scroll;
   width: 200px; /* 容器宽度限制 */
   height: 100vh; /* 自适应高度 */
}

4. **height: 100%;** 如果容器是相对定位的，并且需要响应式内容高度，你可以使用百分比高度，但可能需要配合其他布局技术（如 flex 或 grid）来处理滚动。

为了更好地控制滚动行为，还可以调整滚动条的样式，如颜色、厚度等，通过 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 伪元素来定制。