HTML/CSS如何解决body底部额外空白导致页面异常纵向滚动的问题

问题原因 #

底部空白由以下两点导致：

1. 你给body设置了min-height: 100vh，但作为flex容器，它的子元素#body__默认无flex扩展属性，高度仅匹配自身内容高度，不会占满body的全部高度，body多出的高度就会显示自身背景色，形成可见的底部空白。
2. 部分浏览器（如Firefox）在内容高度接近视口高度时会默认触发纵向滚动条，加重了该异常表现。

修复方案 #

仅需修改两处CSS即可解决：

1. 给#body__添加flex: 1属性，让它自动占满body的全部可用高度：

#body__
{
    background-color:#30364b;
    padding: 0;
    flex: 1; /* 新增该行 */
}

2. 可选优化：给body添加overflow-y: auto，确保只有内容超出视口高度时才显示滚动条：

body
{
    display:flex;
    background-color:#20262b;
    min-height:100vh;
    overflow-y: auto; /* 新增该行 */
}

另外注意你原代码中display:flex后面的分号单独换行了，虽然不影响正常解析，但建议调整为标准写法，避免极端场景下的兼容问题。

内容的提问来源于stack exchange，提问作者Manish Dhruw