<分区>
<分区>
我不明白为什么页脚没有填满整个屏幕底部。注意:如果我尝试延伸到那个 Angular 落而不是页脚，它也会留下空白。只是拒绝用内容填充该区域。我的元素仅包含我在此处显示的 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>关于html - CSS 网格留一格空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54837398/