嵌套React组件中min-height属性未随内容高度变化的原因及解决方法

为什么会出现这个问题？ #

核心原因就是绝对定位的元素会脱离正常文档流：你给.document-results-container设置了position: absolute，这意味着这个容器不再属于父元素.document-results-background的文档流范围里。父元素无法感知到这个子容器的实际高度，所以：

• 当你设置min-height: 100vh时，父元素只会保持最小100vh的高度，哪怕子内容超出，它也不会跟着被撑开；
• 当你改成height: auto时，父元素里没有其他在文档流内的内容，自然高度就变成0了。

怎么解决？ #

这里给你几个实用的方案，根据你的布局需求选就行：

方案1：去掉子容器的绝对定位（最直接）

如果你的布局不需要用绝对定位来控制子容器的位置，直接把它改成正常文档流布局：

/* 修改父元素样式（可保留min-height确保最小高度） */
.document-results-background {
  position: absolute;
  width: 60vw;
  top: 0;
  left: 20vw;
  min-height: 100vh;
  background-color: lightgrey;
}

/* 修改子容器样式 */
.document-results-container {
  /* 删掉绝对定位相关属性 */
  /* position: absolute; */
  /* top: 7.75vw; */
  /* height: calc(100% - 7.75vw); */
  
  /* 用margin-top代替top来实现间距 */
  margin-top: 7.75vw;
  width: 100%;
}

这样子容器回到文档流里，父元素会自动被内容撑开，内容超出100vh时，父元素高度也会跟着增加。

方案2：用Flexbox布局（更现代灵活）

如果需要保留类似的垂直布局逻辑，改用Flexbox是个更好的选择：

.document-results-background {
  position: absolute;
  width: 60vw;
  top: 0;
  left: 20vw;
  min-height: 100vh;
  background-color: lightgrey;
  /* 开启Flex布局 */
  display: flex;
  flex-direction: column;
}

.document-results-container {
  /* 用margin-top实现顶部间距 */
  margin-top: 7.75vw;
  /* 让子容器占据剩余空间，同时内容超出时父元素会被撑开 */
  flex: 1;
  width: 100%;
}

Flex布局会自动处理子元素的空间分配，而且父元素能完美包裹住子内容的高度。

方案3：动态计算高度（仅当必须用绝对定位时）

如果因为特殊需求必须保留子容器的绝对定位，那只能用JavaScript动态计算子容器的高度，再赋值给父元素：

componentDidMount() {
  this.updateParentHeight();
}

componentDidUpdate() {
  this.updateParentHeight();
}

updateParentHeight() {
  const container = document.querySelector('.document-results-container');
  const background = document.querySelector('.document-results-background');
  if (container && background) {
    background.style.height = `${container.offsetHeight + 7.75}vw`; // 加上顶部的间距
  }
}

不过这个方案需要监听组件更新，还要处理窗口 resize 等情况，不如前两种CSS方案优雅，尽量优先用CSS解决。

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