如何实现父div高度由最高同级决定，子footer固定底部无重叠

数据老陈

2026-9-28

问题原因

你之前用position: absolute固定footer的方案会让footer脱离正常文档流，父容器.container的高度仅由内部普通流的title、content元素高度决定，当.supercontainer用flex布局让所有子容器等高被拉伸后，短的容器内footer会直接贴到父容器底部，和上方content重叠。

正确实现方案

不需要用绝对定位，给每个.container也开启垂直方向的flex布局，让.content自动填充剩余空间即可，既可以保证footer固定在容器底部，也不会出现内容重叠的问题。

最终修改后的CSS代码

.supercontainer {
  border: solid 1px black;
  display: flex;
}

.container, .other-container {
  border: solid 1px red;
  width: 200px;
  margin: 10px;
  /* 新增：开启垂直flex布局 */
  display: flex;
  flex-direction: column;
}

.title {
  margin: 10px;
  border: solid 1px blue;
}

.content {
  margin: 10px;  
  border: solid 1px cyan;
  /* 新增：让content自动占满剩余高度 */
  flex-grow: 1;
}

.footer {
  margin: 10px;
  background: lime;
}

HTML代码不需要做任何修改，用你原来的版本即可。

修改后可以同时满足所有需求：