
当 body 设置 overflow: hidden 后,若子 div 无法滚动,根本原因是其高度未被有效约束——即使设为 height: 100%,在无明确高度上下文的文档流中,该百分比值会计算为 0,导致内容不溢出、滚动条失效。
当 body 设置 `overflow: hidden` 后,若子 div 无法滚动,根本原因是其高度未被有效约束——即使设为 `height: 100%`,在无明确高度上下文的文档流中,该百分比值会计算为 0,导致内容不溢出、滚动条失效。
要使 <div> 在 body 禁止滚动的前提下实现独立滚动,关键在于<strong>为其提供一个明确的、可计算的高度基准</strong>。CSS 中 <code>height: 100% 是相对父容器计算的,而 的高度默认由内容撑开;当 且无显式高度时,其计算高度为 auto,此时子元素的 height: 100% 实际解析为 0px,自然无法触发滚动。
✅ 正确做法是:为 <div> 设置一个确定的、非百分比依赖的高度值,或通过视口单位(如 <code>vh)建立可靠参照:
<div style="
width: 100vw;
height: 100vh; /* 关键:使用视口高度,而非 100% */
overflow: auto;
margin: 0;
padding: 16px;
box-sizing: border-box;
">
<pre class="brush:php;toolbar:false;"><code><?php echo htmlspecialchars($content); ?></code>










