本文详解因 #page 元素默认 min-height: 100vh 导致的底部多余空白问题，提供精准 CSS 修复方案，并说明原理、验证方法及兼容性注意事项。
本文详解因 `#page` 元素默认 `min-height: 100vh` 导致的底部多余空白问题，提供精准 css 修复方案，并说明原理、验证方法及兼容性注意事项。
在使用 Elementor（配合 ElementKit 等插件）构建响应式导航栏时，开发者常遇到一个隐蔽但影响布局的问题：页面底部出现一段不可见却占据高度的空白区域（如题图所示），即使内容区域（如 <div id="page">）内仅含一张居中图片，该空白仍持续存在，且无法通过调整 margin、padding 或 line-height 消除。
根本原因在于：Elementor 或相关插件（尤其是 Header/Footer 插件）会为 #page 容器自动注入样式规则，其中常见的一条是：
#page {
min-height: 100vh;
}min-height: 100vh 表示该元素最小高度等于视口高度。当页面内容实际高度小于视口（例如仅有一张 300×300px 图片），浏览器仍会强制 #page 至少撑满整个屏幕高度；而由于其父容器 <body> 默认 display: block 且无特殊清除机制，这段“超额”高度便以不可见但可计算的空白形式出现在文档流末端——即你看到的“unwanted long margin at the bottom”。
✅ 正确解决方案非常简洁，只需覆盖该默认行为：
#page {
min-height: 0 !important;
}⚠️ 注意：!important 是必要的，因为插件内联或高优先级样式可能覆盖普通声明。若项目中已使用 CSS 预处理器或模块化方案，也可将选择器权重提升（如 body #page），但 !important 在此场景下最直接可靠。
? 验证与调试建议：
- 打开浏览器开发者工具（F12），选中 #page 元素，在 Styles 面板中搜索 min-height，确认是否被设为 100vh；
- 应用上述 CSS 后，刷新页面并检查 #page 的 computed height 是否回归为 auto 或实际内容高度；
- 使用 outline: 1px solid red 临时加到 #page 上，直观观察其真实渲染边界。
? 延伸提醒：
- 若后续需恢复「页面最小高度撑满视口」效果（如首页 Hero 区域），请仅对特定页面或条件添加 min-height: 100vh，而非全局作用于 #page；
- 避免滥用 z-index 遮盖空白——这属于视觉欺骗，不解决 DOM 流布局问题，且可能引发点击穿透、SEO 不友好等副作用；
- 在移动端（尤其 Safari iOS）中，vh 单位可能受地址栏显示/隐藏影响，min-height: 100vh 有时会导致布局抖动，min-height: 0 反而是更稳定的基础值。
综上，该问题本质是 CSS 继承与框架默认样式的冲突，而非 JavaScript 滚动逻辑或定位 bug。精准定位 #page 的 min-height 并重置为 0，即可彻底、轻量、无副作用地消除底部冗余空白。
