本文详解因 body { height: 100vh } 和固定高度元素（如 .main__texto { height: 482px }）导致页脚覆盖主内容的典型布局陷阱，并提供基于 Flexbox 的稳健解决方案。
本文详解因 `body { height: 100vh }` 和固定高度元素（如 `.main__texto { height: 482px }`）导致页脚覆盖主内容的典型布局陷阱，并提供基于 flexbox 的稳健解决方案。
在构建响应式单页布局（如个人作品集）时，页脚（footer）意外覆盖主内容（main）是初学者高频遇到的 CSS 布局问题。根本原因并非“页脚没定位好”，而是全局高度约束与局部尺寸固化共同破坏了 Flex 容器的自然流式伸缩逻辑。
? 问题根源分析
你的 style.css 中存在两个关键冲突点：
body { height: 100vh }
强制 body 高度严格等于视口高度，但未预留 footer 空间。当 main 内容实际高度超过 100vh − footer高度 时，浏览器无法自动扩展 body，导致 footer 被“挤”进可视区域底部并覆盖内容。.main__texto { height: 482px }
为文本容器设置绝对高度，使其无法随字体、行高或响应式断点自适应。尤其在不同屏幕宽度或缩放比例（如你观察到的 75% 缩放正常而 100% 异常）下，该固定值极易造成布局溢出。
此外，.main 同时声明了 min-height: 100vh 和 flex: 1 —— 在父容器（body）已被 height: 100vh 锁死的前提下，flex: 1 失去伸缩基准，反而加剧计算混乱。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
✅ 正确解决方案：语义化 Flex 布局
只需移除两处硬编码高度，让 Flexbox 自然接管空间分配：
/* 移除这两行 */
/* body { height: 100vh; } */
/* .main__texto { height: 482px; } */
/* 保持并优化以下结构 */
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* ✅ 改用 min-height，允许内容撑高 */
margin: 0;
background-color: #000;
color: #F6F6F6;
}
.main {
flex: 1; /* ✅ 占据剩余可用空间 */
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
/* 删除 min-height: 100vh —— 由 body 的 min-height 保障基础高度 */
}
.rodape {
margin-top: auto; /* ✅ 利用 Flex 推至底部，不依赖绝对定位 */
padding: 24px;
background-color: #22D4FD;
color: #000;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
⚠️ 注意事项与最佳实践
- 避免混合 height 与 flex：height: 100vh 会“冻结”容器高度，使 flex: 1 失效；改用 min-height: 100vh 是安全底线。
- 慎用固定像素高度：文本容器（.main__texto）、图片（.main__imagem）等应优先使用 max-width、aspect-ratio 或 flex-shrink: 0 控制，而非 height。
- 验证响应式行为：移除硬编码后，在 Chrome DevTools 中切换设备模拟器（如 iPhone SE / Desktop），检查 footer 是否始终位于内容底部且不重叠。
- 额外加固（可选）：若内容极短，可在 .main 添加 padding-bottom: 60px（≈ footer 高度），确保 footer 不被内容遮挡。
通过释放 Flex 容器的弹性能力，而非用刚性尺寸“对抗”布局流，你的页脚将稳定停靠于页面最底端——无论内容多寡、屏幕大小或用户缩放比如何变化。这才是现代 CSS 布局的正确打开方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
