如何用纯CSS让元素自适应填充父容器可用垂直空间？

针对无法控制父容器样式、需要子元素填充父容器可用垂直空间且不产生滚动条的需求，以下是几种可行的纯CSS方案：

方案1：绝对定位（优先推荐，兼容多数场景） #

如果父容器是relative/absolute/fixed/sticky定位（即使你没设置，外部环境可能已默认配置），可以用绝对定位让子元素完全填充父容器：

.mine {
  position: absolute;
  inset: 0; /* 等同于 top: 0; right: 0; bottom: 0; left: 0 */
  box-sizing: border-box;
  margin: 0;
}

该方案无需修改父容器样式，子元素会自动填充父容器所有可用空间，且不会受父容器的padding、margin影响（只要设置box-sizing: border-box）。若父容器是默认的static定位，元素会相对视口定位，此时可结合方案2优化。

方案2：强制祖先元素高度继承 #

若父容器是static定位，可通过选择器强制所有包含.mine的祖先元素高度为100%：

html, body, *:has(.mine) {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}

.mine {
  height: 100%;
  width: 100%;
  background-color: lightblue;
  box-sizing: border-box;
}

这里用:has()选择器自动匹配所有包含.mine的父元素，强制高度继承。注意:has()需要浏览器版本支持（Chrome 105+、Firefox 121+、Safari 15.4+）；若环境不支持，可替换为具体的父容器类名（如.someone_else_controls_this）。

方案3：视口单位结合最大高度 #

如果父容器高度不会超过视口高度，该方案可适配父容器有内边距或外部元素的场景：

.mine {
  height: 100vh;
  max-height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

当父容器高度小于视口时，max-height:100%会限制子元素高度不超过父容器；当父容器高度等于视口时，子元素会填充整个视口。但父容器高度超过视口时，该方案无法让子元素填充全部父容器空间。

通用注意事项 #

• 所有方案建议搭配box-sizing: border-box，避免元素的padding、border导致尺寸超出父容器。
• 若纯CSS方案均无法适配场景，可使用JavaScript动态获取父容器高度并设置子元素高度（这是你已了解的备选方案）。

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