移动端Chrome浏览器中grid container下方出现空白问题求助

我之前也碰到过移动端Chrome里Grid布局的这个诡异问题，这其实是Chrome在处理100vh容器和横向溢出内容时的一个渲染bug。当main元素里有超出视口宽度的内容（比如你的长表格），Chrome会错误计算网格容器的高度，导致底部出现空白，而Firefox的渲染逻辑则更符合预期。

修复方案 #

这里有两个关键调整可以彻底解决这个问题：

• 用min-height:100vh替代height:100vh
  把网格容器的固定高度改为最小高度，这样当内容溢出时，容器会自动扩展以适配内容高度，避免Chrome的高度计算错误。

• 给main添加横向滚动
  为了让长表格在main内部可滚动，而不是撑大整个页面，给main设置overflow-x:auto，既保留内容的可访问性，又不会触发Chrome的渲染bug。

另外我还修正了原布局里的一个小问题：原代码的grid-template-rows只定义了一行高度，补充上1fr让main能正确占满剩余空间。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html { height: 100%; }
        body { min-height: 100%; margin: 0;}
        .container {
            display: grid;
            grid-template-rows: 50px 1fr;
            grid-template-columns: 250px 1fr;
            grid-template-areas: 
                "aside header" 
                "aside main";
            min-height: 100vh; /* 替换固定height为min-height */
        }
        aside { grid-area: aside; background: #2f313a; }
        header { grid-area: header; background: #fff; }
        main { 
            grid-area: main; 
            background: #ebedf3;
            overflow-x: auto; /* 添加横向滚动 */
        }
        /* 可选优化：让表格样式更友好 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <aside>aside</aside>
        <header>header</header>
        <main>
            main 
            <table>
                <tr>
                    <th>Age</th><th>Height</th><th>Registration</th><th>Logged In</th>
                </tr>
                <tr>
                    <td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
                    <td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
                    <td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
                    <td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
                </tr>
            </table>
        </main>
    </div>
</body>
</html>

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