### [details 内容区滚动：固定高度下的正确写法](https://www.huociguo.com/article/1503)

**Published:** 2026-09-30T04:56:33

**Author:** 米了

**Excerpt:** 固定高度容器里 details 展开后没有滚动条，根因是 overflow 加错了层级。含根因、两段修正代码与…

折叠面板放进固定高度的侧栏或弹窗后，展开时内容溢出却没有滚动条，根因是 `overflow` 加错了层级。details 自身不带滚动能力，把 `overflow-y: auto` 写在 details 上时，滚动边界只覆盖 summary 所在的框，内容区要么撑开容器，要么被直接裁掉。

![笔记本电脑屏幕上显示的长页面，用于说明折叠内容溢出后的滚动表现](https://api.huociguo.com/wp-content/uploads/2026/09/a1.jpg)

内容超过容器高度时，滚动条应由包裹层产生，而非 details 自身

## 根因

-   details 高度被写死，展开后子元素高度超过容器，但没有任何祖先元素声明可滚动；
-   overflow 写在 details 自身时，summary 与内容共处一个滚动容器，标题会随内容一起滚动；
-   盒模型层面还有一处：未设置 `box-sizing: border-box` 时，padding 与 border 会额外推高实际占用高度。

## 修正写法

```html
<div class="panel">
  <details open>
    <summary>规格参数</summary>
    <div class="panel-body">
      <!-- 折叠内容 -->
    </div>
  </details>
</div>
```

```css
.panel {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel details { height: auto; }

.panel-body {
  box-sizing: border-box;
  padding: 12px;
}
```

滚动交给外层 `.panel`，details 不再限制高度。summary 保持可见，滚动只发生在 `.panel-body` 区域。

## 三个边界

1.  滚动链穿透。弹窗内的滚动容器补 `overscroll-behavior: contain`，避免滚到底后带动背景一起滚动。
2.  WebView 差异。iOS WKWebView 上不要关闭 `-webkit-overflow-scrolling: touch`，也不要改用 JS 模拟滚动。
3.  pointer-events 误伤。给 summary 加禁用态时不要整层 `pointer-events: none`，否则点击失效。

## 替代做法

内容很长且不需要折叠语义时，整体滚动容器或改用锚点跳转更省事。details 的价值在于原生折叠语义与键盘可达性，这两点用不上时，不必为了折叠而折叠。

**Tags:** details标签, overflow属性, WebView兼容, 容器滚动, 滚动条样式

**Categories:** HTML5

---