如何让子div占满position为absolute的父容器100%高度？

嘿，这个场景我太熟悉了！当父容器是position: absolute且用top/right/bottom/left: 0撑满空间时，要让子div占满它的高度，有几个实用的办法，我给你挨个说：

方法1：子元素也用绝对定位（最直接） #

既然父容器已经是定位上下文了，给子元素也设置绝对定位，然后把四个方向都设为0，就能完全贴合父容器的边界，自动撑满高度和宽度：

.parent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0f0f0; /* 加个背景方便看效果 */
}

.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #e0e0e0;
}

这个方法的好处是子元素脱离了常规文档流，适合不需要和其他元素互动的场景，而且不管父容器的尺寸怎么变化，子元素都会跟着撑满。

方法2：用Flex布局（灵活度高） #

给父容器开启Flex布局，然后给子元素设置flex: 1，这样子元素会自动占据父容器的所有可用空间，这个方法特别适合后面要加其他子元素的情况：

.parent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  background: #f0f0f0;
}

.child {
  flex: 1;
  background: #e0e0e0;
}

如果之后要在父容器里加头部、底部之类的元素，这个布局方式会非常好调整，不用改太多代码。

方法3：直接给子元素设height: 100%（最简单） #

因为你的父容器已经通过top: 0和bottom: 0确定了明确的计算高度，所以直接给子元素设置height: 100%就能让它撑满父容器的高度，再加上width: 100%就能撑满宽度：

.parent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0f0f0;
}

.child {
  height: 100%;
  width: 100%;
  background: #e0e0e0;
}

这个方法最简洁，适合只有单个子元素需要撑满的场景，代码量最少。

小提示 #

这三个方法都能实现需求，你可以根据自己的实际布局场景来选：如果需要子元素脱离文档流选方法1；如果要做复杂布局选方法2；如果只是简单撑满选方法3就行。

内容的提问来源于stack exchange，提问作者J.Doe