本文详解页脚重叠主内容的常见原因及解决方案，重点在于避免硬编码高度、合理使用 flexbox 布局，并通过 min-height 与 flex: 1 协同控制内容区域高度，确保页脚始终位于视口底部且不遮挡内容。
本文详解页脚重叠主内容的常见原因及解决方案，重点在于避免硬编码高度、合理使用 flexbox 布局，并通过 min-height 与 flex: 1 协同控制内容区域高度，确保页脚始终位于视口底部且不遮挡内容。
在构建响应式单页布局（如个人作品集）时，页脚（
? 问题根源分析
从你提供的代码中可定位两个关键冲突点：
-
body { height: 100vh; }
高度锁定为视口高度，但
强制将同时设置了 min-height: 100vh —— 这导致 无法随内容自然撑高，而 又因内部元素（如 .main__texto { height: 482px; }）叠加了固定高度，最终造成整体高度溢出，页脚被“挤”进可视区域下方，视觉上呈现重叠。 .main__texto { height: 482px; }
固定高度会切断 Flex 容器的弹性伸缩能力。当文字内容增多、图片加载延迟或字体渲染差异发生时，该区块极易超出预期高度，进一步加剧布局错位。
✅ 正确解法：拥抱弹性，移除硬编码
只需两处关键修改，即可彻底解决重叠问题：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
/* style.css —— 移除冲突声明 */
body {
/* 删除这一行 ? */
/* height: 100vh; */
}
.main__texto {
/* 删除这一行 ? */
/* height: 482px; */
}
✅ 为什么有效？
- 移除 body { height: 100vh; } 后， 恢复为「由子元素决定高度」的默认行为；
- 保留 body { display: flex; flex-direction: column; } 和 .main { flex: 1; min-height: 100vh; }，使
在内容不足时占满剩余空间，在内容充足时自动撑高； - margin-top: auto 作用于 .rodape，在 Flex 布局下会将其“推”至容器底部，且永远保持在
之后 ，绝不会重叠。
? 补充优化建议
- 响应式适配：.main__texto 的 width: 615px 在小屏下易溢出，建议替换为 max-width: 615px; width: 100%;，并配合 padding 控制内边距。
- 图片处理：.main__imagem 的固定 height: 550px 同样存在风险，推荐改用 max-height: 550px; height: auto; object-fit: contain; 保障比例与安全。
-
无障碍增强：页脚中的
标签建议包裹在
? 总结
页脚重叠本质是「布局控制权争夺」的结果。现代 CSS 布局应优先依赖 Flexbox 的内在流式逻辑，而非手动计算像素值。牢记三条黄金原则：
? 不对 body 或根容器设 height: 100vh（除非全屏应用且无滚动需求）；
? 避免对 Flex 子项设置固定 height，改用 min-height / flex-basis 或 max-height；
? 利用 margin-top: auto 或 align-self: flex-end 让页脚在 Flex 容器中自动归位。
修复后，你的作品集将在所有缩放级别（包括 100%）下稳定呈现：主内容完整可见，页脚始终可靠落于底部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
