如何使内层div填充带padding的外层全屏div剩余空间？

嘿，这个问题我太熟悉了！你碰到的是CSS默认盒模型的经典坑——默认的content-box盒模型下，元素的width和height只计算内容区域的大小，当外层容器有padding时，内层设置100%宽高就会直接撑破外层容器，因为它不会自动减去外层的padding值。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：修改盒模型为border-box（最推荐） #

这是最直接的解决方式，把内外层元素的盒模型改成border-box，这样width和height就会包含内容、padding和border的总尺寸，完美适配你的需求。

修改后的CSS代码：

.fullscreen-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 关键：修改盒模型 */
}

.padding-container {
  padding: 30px;
  box-sizing: border-box; /* 外层也要加，避免它自己撑破页面 */
}

#inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 内层同样设置，确保它的尺寸是外层padding后的剩余空间 */
  /* 可以加个背景色方便看效果 */
  background-color: #f0f0f0;
}

如果想全局统一盒模型，也可以用通配符：

* {
  box-sizing: border-box;
}

这样所有元素都会默认使用border-box，一劳永逸。

方案2：用Flex布局（现代且灵活） #

不需要设置width和height，利用Flex的自动填充特性，让内层div自动占满外层的剩余空间，代码更简洁：

修改后的CSS：

.fullscreen-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.padding-container {
  padding: 30px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex; /* 开启Flex布局 */
}

#inner {
  flex: 1; /* 关键：让内层自动填充剩余空间 */
  background-color: #f0f0f0;
}

这个方案的好处是，如果以后内层需要加其他元素，Flex的布局能力会更灵活，不需要再调整宽高。

方案3：用calc()手动计算宽高（不推荐，仅作参考） #

如果你不想改盒模型或用Flex，也可以手动计算内层的宽高，减去外层左右/上下的padding总和（30px*2=60px）：

#inner {
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  background-color: #f0f0f0;
}

但这个方案的缺点是，一旦外层的padding值改变，你必须手动修改calc里的数值，维护起来比较麻烦，所以只适合临时场景。

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