CSS Grid中使用background-image无法铺满页面的问题求助

问题核心出在Grid容器的高度定义与行高单位的使用上：

1. Grid容器未继承视口高度：尽管body和html设置了height: 100%，但.grid-container没有同步设置高度，导致grid-template-rows中的100%没有有效参考基准，中间行无法自适应填充剩余空间。
2. 行高单位选择错误：用100%定义中间行高会触发异常计算，改用fr单位可自动分配头部、底部之外的所有剩余空间。

修复方案： #

• 给.grid-container添加height: 100%（或height: 100vh），确保容器占据整个视口高度。
• 将grid-template-rows从100px 100% 100px修改为100px 1fr 100px，让中间行自动填充剩余区域。

修改后的完整代码： #

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 20% 60% 20%;
            grid-template-rows: 100px 1fr 100px;
            height: 100%;
        }

        .grid-item1-header {
            grid-column: 1 / span 3;
            grid-row: 1 / 2;
            background-color: #262626;
        }

        .grid-item2-main-img {
            grid-column: 1 / span 3;
            grid-row: 2 / 3;
            background-image: url("img/hole.jpg");            
            background-repeat: no-repeat;
            background-size: cover;
        }

        .grid-item3-footer {
            grid-column: 1 / span 3;
            grid-row: 3 / 4;
            background-color: #262626;
        }
    </style>
</head>
<body>
    <div class='grid-container'>
        <div class='grid-item1-header'></div>
        <div class='grid-item2-main-img'></div>
        <div class='grid-item3-footer'></div>
    </div>
</body>
</html>

额外说明：.grid-item2-main-img中的height: 100%可以移除，Grid子项会自动填充所在网格单元的高度，无需额外设置。

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