如何让子div扩展至父div的可滚动区域？

问题原因 #

你的代码存在两个核心问题：

• 父元素.parent未设置position: relative，导致子元素的position: absolute会以视口或最近的定位祖先为基准，而非父元素，尺寸计算完全偏离预期。
• 子元素用width: 100%和height: 100%仅能匹配父元素可视区域的尺寸，无法覆盖内容滚动后的整体区域，所以父元素出现滚动条时，子元素不会随之扩展。

解决方案 #

修正步骤 #

1. 给父元素添加position: relative，明确子元素的绝对定位基准为父元素。
2. 子元素移除width: 100%和height: 100%，改用top: 0; right: 0; bottom: 0; left: 0;，让子元素完全贴合父元素的整个内容区域（包括滚动部分）。
3. 修复父元素CSS笔误：将border: 2x solid black改为border: 2px solid black。

修正后的代码 #

.parent {
  width: 400px;
  height: 400px;
  overflow: auto;
  border: 2px solid black;
  position: relative; /* 设定定位基准 */
}

.child {
  background: #0088ff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* 通过四边定位铺满父元素全部内容区域 */
}

<div class="parent">
  <div class="child"></div>
  <!-- 示例可拖拽内容 -->
  <div style="width: 600px; height: 600px; background: rgba(255,255,255,0.6);">可拖拽节点内容</div>
</div>

补充说明 #

如果子元素不需要作为独立的背景层，而是要和内容同流，可以移除绝对定位，改用min-width: 100%; min-height: 100%;，同时给父元素设置display: inline-block（确保父元素跟随内容动态扩容），这种方式适合不需要固定定位的场景。

内容的提问来源于stack exchange，提问作者Anupam Krishna