页面高度增加时底部出现空白的原因及解决方法

问题描述 #

网站在1440x760分辨率下显示正常，但当视口高度增加时，页面底部出现空白区域。

根本原因 #

问题出在地图容器的高度设置和主布局的弹性不足：

1. #map 使用了固定计算高度 calc(656px - 20vw)，该值仅适配特定宽度下的高度，无法随着视口高度增加而扩展。
2. .main-body 作为垂直flex容器，未设置 min-height: 100vh，导致容器无法填充整个视口高度；同时 .main-container 没有配置弹性增长属性，无法占据剩余空间。

修复代码 #

1. 让主容器填充视口高度 #

更新 .main-body 样式：

.main-body{
    display: flex;
    flex-direction: column;
    text-align: center;
    min-height: 100vh; // 确保容器占满整个视口高度
}

2. 让地图自适应剩余空间 #

修改 .main-container 和 #map 的布局逻辑：

& .main-container{
    width: 100%;
    flex-grow: 1; // 占据.main-body的剩余空间
    display: flex;
    flex-direction: column;

    & #map { 
        z-index: 2;
        position: relative;
        height: auto; // 移除固定高度
        flex-grow: 1; // 自动填充.main-container的剩余空间
        width: 100%;
        margin-top: 4.6%;
    };
}

预防未来问题的最佳实践 #

• 采用弹性布局：优先使用flex/grid替代固定尺寸，让页面元素能自适应视口变化。
• 使用相对单位：减少硬编码像素值，改用 vh、vw、rem 或CSS变量管理尺寸。
• 多维度测试：开发时测试不同宽高比的视口，覆盖高度大于设计稿的场景。
• 剩余空间分配：当页面存在固定高度的顶部区域时，通过 flex-grow 或 calc(100vh - 顶部总高度) 让下方容器自动填充剩余空间。

内容的提问来源于stack exchange，提问作者Mohammad Mustak Absar Khan