CSS Grid练习：100vh无法实现页面完全拉伸问题求助

直接给你指出核心问题并给出修正方案，改完就能实现全屏铺满的效果：

关键问题点 #

1. 网格布局应用对象错误：你把display: grid加在了body上，但实际需要布局的header/main等元素都是.container的子元素——grid布局只对直接子元素生效，所以当前规则根本没作用到目标元素上。
2. 拼写错误导致margin未清零：全局样式里写的是margin: o;（字母o），不是margin: 0;（数字0），浏览器默认的margin没被覆盖，页面边缘会留空白。
3. 缺少网格轨道尺寸定义：只靠grid-template-areas划分区域不够，必须明确grid-template-columns和grid-template-rows，告诉浏览器每列每行该分配多少空间，否则元素只会收缩到内容宽度。
4. 容器未铺满视口：需要确保.container占满整个视口高度，避免内容缩成一团。

修正后的完整代码 #

HTML（结构无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Practice</title>
    <link rel="stylesheet" href="grid.css">
</head>
<body>
    <div class="container">
        <header>Header</header>
        <main>Main</main>
        <nav>Navigation</nav>
        <aside>Sidebar</aside>
        <footer>Footer</footer>
    </div>
</body>
</html>

CSS（核心修改部分）

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0; /* 修正字母o为数字0 */
}

body {
    font-family: sans-serif;
    font-size: 16px;
    margin: 0; /* 清除body默认margin */
}

/* 将网格布局移到正确的容器上 */
.container {
    height: 100vh; /* 铺满视口高度 */
    display: grid;
    /* 定义列宽：导航列固定200px，主内容和侧边栏平分剩余空间 */
    grid-template-columns: 200px 1fr 1fr;
    /* 定义行高：头部自适应，主内容占剩余空间，底部固定100px */
    grid-template-rows: auto 1fr 100px;
    grid-template-areas:  
    "hd hd hd"
    "nav cont side"
    "nav foot foot";
}

header,
footer,
main,
aside,
nav {
    background-color: peachpuff;
    color: #fff;
    padding: 20px;
    border: palegoldenrod 1px solid;
}

header { grid-area: hd; }
footer { grid-area: foot; }
main { grid-area: cont; }
aside { grid-area: side; }
nav { grid-area: nav; }

你可以根据需求调整grid-template-columns和grid-template-rows的数值，比如把导航列改成1fr让它自适应，或者修改footer的高度。修改后页面就能在横竖方向完全铺满视口了。

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