min-height与position:absolute共存时容器高度不自适应问题求助

这个问题其实是绝对定位元素的经典特性导致的——当你给.firstpart和.secondpart设置position:absolute后，它们会完全脱离正常的文档流，也就是说父元素header根本“看不到”这些元素的存在，自然无法根据它们的高度自适应调整，只能维持你设置的min-height:100px，这就是为什么内容会跑到header外面去。

下面给你两种可行的解决方案，优先推荐更现代的布局方案：

方案一：用Flexbox重构布局（推荐） #

Flexbox是处理这类左右分布布局的最佳方案，它既可以实现你想要的左右对齐效果，又能让header自动适应内部内容的高度。修改你的CSS如下：

header {
  background-color: aqua;
  display: flex; /* 开启Flex布局 */
  justify-content: space-between; /* 让子元素分别靠左右两端对齐 */
  min-height: 100px;
  padding: 0 300px; /* 用padding替代absolute的left/right间距 */
}

.firstpart, .secondpart {
  margin-top: 100px; /* 用margin替代absolute的top间距 */
  /* 移除position:absolute */
}

HTML部分不需要做任何修改，这样header会自动计算内部两个区块的高度，实现自适应，同时完美还原你想要的布局效果。这种方案代码更简洁，维护性也更强，后续调整布局会非常方便。

方案二：保留绝对定位（不推荐，仅作备选） #

如果你因为某些原因必须保留绝对定位，那只能手动让header“感知”到子元素的高度，比如给header添加足够的内边距来容纳绝对定位的内容：

header {
  background-color: aqua;
  display: block;
  position: relative;
  min-height: 100px;
  padding-bottom: 150px; /* 根据你的内容高度调整这个值，确保能放下子元素 */
}

.firstpart, .secondpart {
  position: absolute;
  top: 100px;
}
.firstpart { left: 300px; }
.secondpart { right: 300px; }

不过这种方法有个明显的缺陷：如果后续内容高度发生变化，你需要手动修改padding-bottom的值，灵活性很差，所以除非迫不得已，不建议用这种方式。

本质问题就是绝对定位元素脱离文档流导致父元素无法计算其高度，用Flexbox这类现代布局方案能从根源上解决这个问题，是更优的选择。

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