我不明白为什么页脚没有填满屏幕的整个底部。注意：如果我试图延伸到那个角落而不是页脚，那么它也会留空。只是拒绝用内容填充该区域。我的项目只包含我在这里展示的css和html。它在chrome中表现相同。
HTML：
<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
CSS：
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area aside;
background-color: green;
}
footer {
grid-area footer;
background-color: gray;
}
你忘记了css中的冒号。它应该是grid-area: footer;，除了你有grid-area footer;。现在已经修复了下面的代码片段。你也做了同样的事情。我把它固定在你的代码片段中。
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area: aside;
background-color: green;
}
footer {
grid-area: footer;
background-color: gray;
}<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>