CSS容器高度问题求助：黄色盒子超出蓝色容器范围

针对你遇到的黄色.box超出蓝色.container2范围，需要让.box高度等于.container2减去.boxtop高度的问题，这里提供几种实用的解决方法：

方法一：Flexbox布局（推荐） #

利用Flexbox的弹性特性，让.box自动填充剩余空间，无需手动计算高度：

.container2 {
  display: flex;
  flex-direction: column;
  /* 保留你原有背景、内边距等样式 */
}

.box {
  flex: 1;
  /* 移除原来的固定高度或100%高度设置 */
}

原理：将.container2设为纵向Flex容器后，.boxtop会占据自身内容所需高度，flex:1会让.box自动填充容器剩余的全部空间。

方法二：CSS Grid布局 #

同样是现代布局方案，通过网格行分配实现自适应：

.container2 {
  display: grid;
  grid-template-rows: auto 1fr;
}

原理：grid-template-rows: auto 1fr 表示第一行（.boxtop）自适应内容高度，第二行（.box）占据容器剩余的所有空间。

方法三：calc()计算高度（适用于固定高度场景） #

如果.boxtop的高度是固定值（比如50px），可以用calc()直接计算.box的高度：

.container2 {
  height: 300px; /* 需给容器设置明确高度 */
  box-sizing: border-box;
}

.boxtop {
  height: 50px; /* 固定高度 */
}

.box {
  height: calc(100% - 50px);
  box-sizing: border-box;
}

注意：这种方法依赖.boxtop的固定高度，且.container2必须有明确的高度值，灵活性不如前两种方案。

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