本文详解因 #page 元素默认 min-height: 100vh 导致的底部多余空白问题，提供精准 CSS 修复方案，并说明原理、验证方法及兼容性注意事项。
本文详解因 `#page` 元素默认 `min-height: 100vh` 导致的底部多余空白问题，提供精准 css 修复方案，并说明原理、验证方法及兼容性注意事项。
在使用 Elementor（配合 ElementKit 插件）构建响应式导航栏时，开发者常遇到一个隐蔽但影响体验的问题：页面底部出现一段不可见却占位的长空白区域（如图所示），即使内容高度远低于视口，滚动到底部仍需额外滑动——这并非由 margin 或 padding 引起，而是源于框架或主题自动为容器元素（如 #page）注入的默认样式。
根本原因在于：Elementor 或其配套插件（如 ElementKit 的页眉/页脚模块）通常会为 #page 或主内容容器设置 min-height: 100vh，意图确保页面至少撑满整个视口高度。但在本例中，该样式与绝对定位的导航栏（.nav）及后续锚点（<div id="nav1"></div>）共同作用，导致浏览器将 #page 视为一个“最小高度为全屏”的块级容器，其实际渲染高度被强制拉伸，从而在内容之后生成大量空白。
✅ 精准解决方案
只需覆盖该默认行为，将 #page 的最小高度重置为 0vh（即不强制撑高）：
#page {
min-height: 0vh !important;
}⚠️ 注意：!important 在此场景下是必要的，因为 Elementor 动态内联样式或主题 CSS 优先级较高，普通声明可能被覆盖。
? 验证与调试建议
- 打开浏览器开发者工具（F12），选中 #page 元素，在 Styles 面板中搜索 min-height，确认是否被设为 100vh；
- 手动添加上述 CSS 后，观察空白是否立即消失；
- 检查响应式表现：在移动端（max-width: 600px）下，确保 .nav.pagenav 隐藏逻辑不受影响（当前媒体查询已正确处理）。
? 进阶提示
- 若项目中存在多个类似容器（如 #content, .site-content），建议统一检查其 min-height 值；
- 避免滥用 !important，可将该规则置于自定义 CSS 文件末尾，或通过 Elementor 的「自定义代码」模块注入；
- 不推荐用 z-index 叠加遮罩层掩盖空白——这属于视觉欺骗，未解决布局根源问题，且可能引发点击穿透或可访问性缺陷。
综上，该问题本质是 CSS 层叠与默认样式冲突所致，修复关键在于精准定位并覆盖错误的高度约束，而非调整定位、边距或动画逻辑。一行 CSS 即可回归预期布局，兼顾语义清晰与维护性。
