CSS问题：如何让父Div自适应子Div高度？负定位场景求助

这问题我之前踩过坑！用百分比padding-bottom在响应式里确实容易失效，给你几个亲测好用的方案，完美适配响应式场景：

方案1：CSS Grid布局（最推荐） #

Grid天生就能帮你处理容器高度自适应的问题，不需要依赖任何固定数值，响应式下也能自动适配：

/* 给白色父section设置grid布局 */
.second-section {
  display: grid;
}

/* 黄色子容器的样式 */
.yellow-child {
  margin-top: -100px; /* 用负margin替代position: absolute的top偏移 */
  align-self: end; /* 把子容器对齐到父section的底部，实现和top:-100px一样的视觉效果 */
}

原理是Grid容器会自动计算所有子元素的实际占用空间，哪怕子元素用了负margin，父容器也会撑开足够高度，不会让下面的蓝色section往上跑。

方案2：Flexbox布局（灵活简单） #

用Flexbox也能轻松搞定，通过调整子元素的顺序和margin来实现：

.second-section {
  display: flex;
  flex-direction: column;
}

.yellow-child {
  margin-top: -100px;
  order: -1; /* 把黄色子容器放到父容器内容的最前面，模拟在两个主div之间的位置 */
}

Flex容器同样会自动包裹子元素的高度，响应式下不需要额外调整，子容器的位置和高度都会自适应。

方案3：伪元素+min-height（兼容旧浏览器） #

如果需要兼容不支持Grid/Flex的旧浏览器，可以用伪元素来手动撑开父容器的高度：

.second-section {
  position: relative;
  /* 假设黄色子容器高度是200px，那么min-height就是偏移量100px + 子容器高度200px */
  min-height: calc(100px + 200px);
}

/* 用伪元素占据偏移量的高度，撑开父容器 */
.second-section::after {
  content: "";
  display: block;
  height: 100px;
}

.yellow-child {
  position: absolute;
  top: -100px;
  width: 100%;
  height: 200px;
}

如果子容器高度是动态的，可以用JS实时计算并更新父容器的min-height，不过这个方法不如前两个灵活，优先推荐前两个方案。

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