如何解决网页底部无法消除的多余空白问题

核心问题根源 #

• HTML标签未闭合引发渲染错位：分类导航<ul class="noticiasCatUl">缺少对应的</ul>闭合标签，文章列表区域<section class="noticiasMidSection">也缺少</section>闭合标签，浏览器自动补全错位标签时会打乱元素嵌套关系，导致高度计算异常，视口缩放时偏差被放大就会露出底部空白。
• 负百分比边距导致高度计算bug：.logoNavDiv设置了margin: -3% auto -4% auto;，百分比边距的计算值绑定父元素宽度，不同视口尺寸下会让header区域的实际占位和渲染高度不一致，挤压后续内容布局形成异常空隙。
• 无效CSS属性引发行高计算偏差：代码中多处写了font-weight: 600px;，font-weight属性不需要带px单位，无效值会导致浏览器文本行高计算偶发错误。
• Grid布局缺少高度约束：.mainContainerNoticias作为Grid容器没有设置高度规则，内部元素溢出时浏览器会给Grid轨道预留额外空间，形成固定空白。

修复步骤 #

1. 补全所有未闭合的HTML标签，修正后main区域结构参考如下：

<main class="mainNoticiasGrid">
    <section class="NoticiasTopSection">
        <ul class="noticiasCatUl">
            <li class="noticiasCatLi"><a href="" class="noticiasCatLink">TODO</a></li>
            <li class="noticiasCatLi"><a href="" class="noticiasCatLink">NOTICIAS</a></li>
            <li class="noticiasCatLi"><a href="" class="noticiasCatLink">ARTICULOS</a></li>
        </ul>
    </section>
    <section class="noticiasMidSection">
        <!-- 所有文章卡片放在该标签内部 -->
    </section>
</main>

2. 替换不稳定的负百分比边距，调整.logoNavDiv样式，用padding控制间距避免布局偏移：

.logoNavDiv {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0.5rem 0;
}

3. 修正所有无效的font-weight写法，把所有font-weight: 600px;改为font-weight: 600;，删除多余的px单位。
4. 给根元素添加基础布局约束，避免横向溢出和高度计算异常：

html, body {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

5. 优化Grid布局规则，让页脚自动贴底，从根源避免内容不足时的空白问题：

.mainContainerNoticias {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer"
    ;
    min-height: 100vh;
}

把原来的repeat(3, auto)改为auto 1fr auto后，中间main区域会自动占满剩余视口高度，页脚始终固定在页面最底部，缩放视口也不会出现异常空隙。

修改完成后清空浏览器缓存再测试即可，所有页面复用公共头部样式，统一修正上述问题后所有页面的空白异常都会消失。

内容的提问来源于stack exchange，提问作者Dual Athloner