当 设置 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;"></pre> 中（语义更准确，且默认保留换行与空格），而非仅用 <code>。
以下是修正后的完整示例：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可滚动内容容器</title><div style="
width: 100vw;
height: 100vh; /* 关键：使用 viewport 单位 */
overflow: auto;
margin: 0;
padding: 16px;
box-sizing: border-box;
">
<pre class="brush:php;toolbar:false;" style="
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;
"><code><?php echo htmlspecialchars($content); ?></code>
⚠️ 注意事项：
- 避免仅依赖
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 是最直接、跨浏览器稳定的方案。
