移动端页面底部出现异常空白间隙的排查与解决求助

问题重现 #

页面采用Flex布局实现固定Header、Footer，中间Main区域自动填充垂直空间，内容溢出时显示滚动条。桌面端表现正常，但在移动端（或DevTools移动端模拟模式）下，Footer下方会出现随水平空间缩小而增大的空白间隙；移除viewport标签后间隙消失，但移动端显示效果极差，需实现移动端与缩小后桌面端一致的表现。

问题原因 #

核心问题在于html设置了固定height: 100%，结合body的min-width: fit-content，当水平内容溢出时：

• html的高度被固定为初始视口高度，无法随水平滚动后的可视区域自适应
• body的宽度因内容溢出超出视口，导致滚动到右侧时，html的高度不足以覆盖整个可视区域，其背景色（红色）暴露形成空白间隙

修复方案 #

修改html和body的样式，确保垂直高度能自适应内容，同时保留水平溢出滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        html {
            min-height: 100%; /* 替换原height:100%，确保高度至少覆盖视口，内容溢出时自动扩展 */
            background-color: red;
            overflow-x: auto; /* 让水平滚动在html层级触发，避免视口滚动导致的高度计算问题 */
        }

        body {
            display: flex;
            flex-direction: column;
            margin: 0;
            min-width: fit-content;
            min-height: 100%;
            width: 100%; /* 确保body宽度默认不超出视口，同时min-width: fit-content保证内容不被截断 */
        }

        header, footer {
            background-color: white;
        }

        main {
            flex: 1;
            background-color: gray;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <header>
        <p>what's up! welcome to my awesome website.</p>
    </header>
    <main>
        <h1>big and looooooooooong text to more easily simulate possible horizontal overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
        <h1>more easily simulate possible vertical overflow</h1>
    </main>
    <footer>
        <p>pushed down low!</p>
    </footer>
</body>
</html>

关键修改点 #

• 将html的height: 100%改为min-height: 100%：确保HTML元素高度至少覆盖视口，当内容垂直溢出时自动扩展高度，避免滚动后暴露背景
• 给html添加overflow-x: auto：让水平滚动在HTML层级触发，统一滚动上下文，避免视口滚动导致的高度计算偏差
• 给body添加width: 100%：保证body默认宽度与视口一致，同时min-width: fit-content确保长内容不会被截断

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