如何让position:relative父元素高度匹配最高position:absolute子元素？

首先得明确问题根源：你给两个子元素都设置了position:absolute，这会让它们完全脱离正常文档流——简单说就是<main>根本“看不到”这两个元素的存在，自然没法根据它们的高度来调整自己的高度，不管你给main加height:auto还是100%都没用。

既然不能改HTML顺序、不能用flex，那咱们换一种不脱离文档流的布局方式就行，推荐两种方案：

方案一：浮动布局（兼容性最好） #

把绝对定位换成浮动，同时给main加上清除浮动的样式，让它能包裹住浮动的子元素：

/* 全局盒模型统一，避免宽度计算出错 */
main, .layout-sidebar-first, .layout-content {
  box-sizing: border-box;
}

main {
  max-width: 1000px;
  position: relative;
}
/* 用伪元素清除浮动，比overflow:hidden更稳定 */
main::after {
  content: "";
  display: table;
  clear: both;
}

.layout-sidebar-first {
  width: 25%;
  float: left; /* 左浮动实现居左 */
}

.layout-content {
  width: 75%;
  float: right; /* 右浮动实现居右 */
}

浮动元素虽然会脱离文档流的部分特性，但父元素通过清除浮动后，会重新识别到它们的高度，这样main就能自动适应最高子元素的高度了。

方案二：inline-block布局 #

这种方式也能让子元素留在文档流内，需要处理一下inline-block自带的空白间距：

main, .layout-sidebar-first, .layout-content {
  box-sizing: border-box;
}

main {
  max-width: 1000px;
  position: relative;
  font-size: 0; /* 消除子元素间的空白间距 */
}

.layout-sidebar-first {
  width: 25%;
  display: inline-block;
  vertical-align: top; /* 让两个元素顶部对齐 */
  font-size: 16px; /* 恢复正常字体大小 */
}

.layout-content {
  width: 75%;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

这个方案同样能让main自适应子元素高度，不过要注意font-size的重置和恢复，不然会影响文字显示。

为什么原来的绝对定位方案不行？ #

再强调一下：绝对定位的元素会从文档流中完全移除，父元素的高度计算只会基于文档流内的元素，所以main根本没法获取到两个绝对定位子元素的高度，自然无法自适应。

内容的提问来源于stack exchange，提问作者Ann-Sophie