如何用CSS实现父div内子div的动态高度分配？

用Flexbox就能轻松解决这个动态高度分配的需求，具体实现如下：

基础布局设置 #

先给父容器配置垂直方向的Flex布局，并指定父容器的高度（比如视口高度100vh，或你需要的固定数值），这样子元素才能基于父容器分配空间：

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 可替换为业务所需的具体高度 */
  margin: 0;
}

/* 基础子元素样式，方便区分边界 */
.parent > div {
  border: 1px solid #ccc;
  padding: 10px;
}

情况1：c2、c3存在时，所有子元素设特定高度 #

直接给所有子元素设置固定高度（比如均分父容器高度，或固定像素值）：

/* 当c2、c3存在时，所有子元素应用特定高度 */
.parent .c1, .parent .c2, .parent .c3, .parent .c4 {
  height: 25%; /* 均分父容器高度，也可设为具体值如120px */
}

对应的HTML结构：

<div class="parent">
  <div class="c1">abc</div>  
  <div class="c2">abc</div>
  <div class="c3">abc</div>
  <div class="c4">abc</div>
</div>

情况2：c2、c3不存在时，c4占据剩余空间 #

让c1保持固定高度，给c4设置flex: 1，它会自动填充父容器的剩余空间：

方案A：用CSS :has选择器（现代浏览器支持） #

/* 检测父容器内没有c2和c3时应用样式 */
.parent:has(:not(.c2)):has(:not(.c3)) .c1 {
  height: 100px; /* 你的特定高度 */
}
.parent:has(:not(.c2)):has(:not(.c3)) .c4 {
  flex: 1;
}

对应的HTML结构：

<div class="parent">
  <div class="c1">abc</div>  
  <div class="c4">abc</div>
</div>

方案B：JS动态添加类（兼容旧浏览器） #

如果需要兼容不支持:has的浏览器，可通过JS动态给父容器标记状态类：

// 检测c2、c3是否存在，添加对应状态类
const parent = document.querySelector('.parent');
const hasC2 = parent.querySelector('.c2') !== null;
const hasC3 = parent.querySelector('.c3') !== null;
if (!hasC2 && !hasC3) {
  parent.classList.add('no-c2c3');
}

对应的CSS：

.parent.no-c2c3 .c1 {
  height: 100px;
}
.parent.no-c2c3 .c4 {
  flex: 1;
}

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