Question

我不明白为什么页脚没有填满整个屏幕底部。注意：如果我尝试延伸到那个角落而不是页脚，那也会空白。只是拒绝用内容填充该区域。我的项目仅包含我在此处显示的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;
}

结果：
firefox firefox css grid prop

Answer 1

您忘记了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>

CSS网格将一个正方形留空

1 个答案: