当 设置 overflow: hidden 后，子元素（如 ）若未明确指定可滚动区域的高度，即使设置了 overflow: auto 也无法触发滚动——根本原因是其高度未被有效约束，导致内容无溢出。

当 `

` 设置 `overflow: hidden` 后，子元素（如 `

`）若未明确指定可滚动区域的高度，即使设置了 `overflow: auto` 也无法触发滚动——根本原因是其高度未被有效约束，导致内容无溢出。

在您的代码中，<div> 虽设置了 <code>height: 100%，但该百分比高度依赖于父容器（即 ）的计算后高度。而当 未设置显式高度（如 height: 100vh）且 overflow: hidden 时，浏览器无法从文档流中推导出 100% 的实际像素值，导致 div 高度坍缩为“内容高度”，从而没有滚动触发条件。

✅ 正确做法是：为 div 设置基于视口的绝对高度（如 100vh），并确保其内容容器具备可溢出的约束。同时建议将文本内容包裹在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 中（语义更准确，且默认保留换行与空格），而非仅用 &lt;code&gt;&lt;code&gt;&lt;/code&gt;。&lt;/p&gt;&lt;p&gt;以下是修正后的完整示例：&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;!DOCTYPE html&gt; &lt;html lang=&quot;zh-CN&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;可滚动内容容器&lt;/title&gt; &lt;/head&gt; &lt;body style=&quot;margin: 0; overflow: hidden;&quot;&gt; &lt;div style=&quot; width: 100vw; height: 100vh; /* 关键：使用 viewport 单位 */ overflow: auto; margin: 0; padding: 16px; box-sizing: border-box; &quot;&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot; style=&quot; margin: 0; white-space: pre-wrap; /* 允许自动换行，提升长行可读性 */ word-break: break-word; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; line-height: 1.5; &quot;&gt;&lt;code&gt;&lt;?php echo htmlspecialchars($content); ?&gt;&lt;/code&gt;</pre>

⚠️ 注意事项：

• 避免仅依赖 height: 100%：它在无明确高度祖先时无效，100vh / calc(100vh - Xpx) 更可靠；
• <pre class="brush:php;toolbar:false;"></pre> 比 <code> 更适合大段预格式化文本（<code> 是行内语义，应嵌套在 <pre class="brush:php;toolbar:false;"></pre> 内）；
• 使用 htmlspecialchars() 输出 PHP 变量，防止 XSS；
• 添加 box-sizing: border-box 和 padding 可避免滚动条被遮挡或布局错位；
• 若需兼容移动端，可补充 touch-action: pan-y 或 -webkit-overflow-scrolling: touch（iOS Safari 旧版优化）。

总结：滚动行为的本质是「有约束才有溢出，有溢出才可滚动」。禁用 body 滚动时，必须显式定义可滚动容器的尺寸边界——100vh 是最直接、跨浏览器稳定的方案。