如何在父级main div内放置footer div实现header-content-footer布局

核心错误原因 #

你对relative定位的基准理解错了：position: relative的偏移基准是元素自身在正常文档流中的原始位置，不是父元素。你设置bottom: 0本质是让元素相对于自己原本该待的位置偏移0距离，等于没有任何位移效果，自然不会贴合父元素底部。

推荐实现方案（弹性盒布局，兼容好适配性强） #

只需要修改父容器和中间内容的样式即可，不需要给footer加定位：

1. 给父容器.main添加以下属性：

.main {
  display: flex;
  flex-direction: column;
  /* 按需设置父容器高度，要占满视口可以设为height: 100vh，或者继承上层元素高度 */
  height: 400px;
}

2. 给中间内容区域.content添加属性，让它自动占满剩余高度：

.content {
  flex: 1;
  /* 内容过多时可以加overflow: auto; 实现内部滚动 */
}

3. footer不需要加任何定位属性，会自动被挤到父容器最底部。

定位实现方案（仅适合固定高度场景） #

如果必须用定位逻辑实现，要改用绝对定位，同时给父元素加定位上下文：

1. 先给父容器.main添加相对定位，作为绝对定位的基准：

.main {
  position: relative;
  height: 400px; /* 必须设置明确高度 */
}

2. 给footer修改定位为absolute：

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 绝对定位会脱离文档流，需要手动设置宽度占满父容器 */
}

注意：该方案下footer会脱离文档流，如果中间content内容超过父容器高度，会被footer遮挡，仅适合父容器高度固定、content内容不会溢出的场景。

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