如何调整子元素使其适配父div内部（含内边距）？

核心问题分析 #

你的子元素使用position: absolute但父元素未设置定位上下文，导致子元素的width:100%是相对于视口（或最近的定位祖先）计算的，且绝对定位元素默认不会继承父元素的内边距，因此右侧会超出预期范围。

具体解决方案 #

步骤1：给父元素设置定位上下文

先给.parent添加position: relative，让子元素的绝对定位以父元素为参考：

.parent {
  padding: 20px;
  border: 0.1em solid;
  height: 200px;
  position: relative; /* 新增定位上下文 */
}

步骤2：调整子元素宽度适配内边距

有两种简洁的实现方式：

方式一：用calc()计算精确宽度

直接减去父元素左右内边距的总和（20px×2=40px）：

.child {
  position: absolute;
  border: 0.1em solid;
  height: 10px;
  width: calc(100% - 40px); /* 适配内边距的宽度 */
  top: 20px; /* 明确对齐父元素内边距顶部 */
  left: 20px; /* 明确对齐父元素内边距左侧 */
}

方式二：通过左右定位自动适配

无需手动计算数值，设置left和right为父元素的内边距值，让子元素自动填充内边距之间的空间：

.child {
  position: absolute;
  border: 0.1em solid;
  height: 10px;
  width: auto; /* 改为自动宽度 */
  top: 20px;
  left: 20px;
  right: 20px; /* 新增右侧定位，限制边界 */
}

第二种方式更灵活，后续若修改父元素内边距，无需同步调整子元素的宽度数值。

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