梗概

CSS高度自适应布局是指容器高度能够根据内容或父容器自动调整的布局方式。主要有两种场景：固定容器高度让子元素撑满，以及子元素撑开父容器高度。

应用场景

child::

子元素撑满容器空间

实现目标：父容器高度固定（如300px），子元素平分或占满容器高度

原理一：通过css自动计算

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

原理二：js计算

child::js实现子元素撑满容器空间

指向原始笔记的链接

实现目标：父元素高度随子元素自动扩展（默认行为）

.parent {
  /* 不设置height，默认height: auto */
  width: 100%; /* 可选宽度约束 */
}
 
.child {
  /* 子元素有实际内容/高度即可自动撑开父级 */
}