如何实现容器高度为内容高度一半且背景色仅填充一半？

首先先还原你的原始代码场景：

#container { width: 300px; background-color: red; display: flex; justify-content: center; }
#child { background-color: green; width: 250px; height: 150px; position: relative; top: 75px; }

<div id="container"> <div id="child"></div> </div>

要实现容器高度为内容高度的一半（75px），同时容器背景色仅填充一半的需求，我给你两种实用的实现方案：

方法一：固定高度+背景渐变+绝对定位调整 #

这种方式直接明确容器高度，用渐变背景控制显示区域，同时调整子元素定位保证视觉效果：

#container {
  width: 300px;
  /* 直接设置为内容高度的一半：150px / 2 = 75px */
  height: 75px;
  /* 线性渐变实现仅上半部分显示红色，下半部分透明 */
  background: linear-gradient(to bottom, red 50%, transparent 50%);
  display: flex;
  justify-content: center;
  /* 让容器成为子元素绝对定位的参考容器 */
  position: relative;
}

#child {
  background-color: green;
  width: 250px;
  height: 150px;
  /* 改为绝对定位，贴着容器底部对齐，和你原来的top偏移视觉效果一致 */
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="child"></div>
</div>

关键细节说明： #

• 容器高度固定为75px，完全符合「内容高度一半」的要求；
• 用linear-gradient精准控制背景显示范围，只让上半部分填充红色；
• 子元素改用绝对定位并底部对齐，既不影响容器高度计算，又能保持和你原始代码相近的视觉布局。

方法二：CSS裁剪（clip-path）+ 高度限制 #

如果你更倾向于用裁剪方式控制背景可见区域，可以试试这个方案：

#container {
  width: 300px;
  background-color: red;
  display: flex;
  justify-content: center;
  /* 限制容器最大高度为内容的一半 */
  max-height: 75px;
  /* 裁剪掉容器下半部分的背景，只保留上半部分 */
  clip-path: inset(0 0 50% 0);
  position: relative;
  /* 允许子元素超出容器范围显示 */
  overflow: visible;
}

#child {
  background-color: green;
  width: 250px;
  height: 150px;
  position: absolute;
  bottom: 0;
}

关键细节说明： #

• clip-path: inset(0 0 50% 0)是核心，它会把容器的背景区域裁剪掉下半部分，只留上半部分红色；
• max-height:75px确保容器高度不会超过内容高度的一半；
• 同样用绝对定位让子元素对齐容器底部，保证视觉连贯性。

两种方案都能完美达成你的需求，你可以根据自己的实际场景选择：如果需要更灵活的背景效果（比如渐变过渡）选方法一，如果单纯想精准裁剪背景选方法二更直观。

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