css实现子元素撑满容器空间

方法1：弹性布局

.parent {
  height: 300px; /* 固定高度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
}
.child {
  flex: 1; /* 占满剩余空间 */
  /* 若需间距：添加margin/padding，配合box-sizing: border-box */
}

方法2：网格布局

.parent {
  height: 300px;
  display: grid;
  grid-template-rows: 1fr; /* 单行平分 */
  /* 多行：grid-template-rows: repeat(3, 1fr); */
}
.child {
  height: 100%; /* 可选 */
}

方法3：百分比高度（适合简单场景）

.parent {
  height: 300px;
}
.child {
  height: 100%; /* 所有子元素共享100%高度 */
  /* 注意：若多个子元素需间隔，用calc(100% / N)计算 */
}