Html CSS网格留下一个正方形空白_Html_Css_Css Grid

Html CSS网格留下一个正方形空白

html css

Html CSS网格留下一个正方形空白,html,css,css-grid,Html,Css,Css Grid,我不明白为什么页脚没有填满整个屏幕底部。注意：如果我试图延伸到那个角落而不是页脚，它也会留下空白。只是拒绝用内容填充该区域。我的项目只包括我在这里展示的css和html。它在chrome中的行为相同 HTML: 结果：您在css中忘记了冒号。它应该是网格区域：页脚除了你有网格区页脚。现在，在下面的代码片段中为您修复了它。你对旁白也做了同样的事。我在片段中为您解决了这个问题 .container{ 高度：100vh；显示：网格；网格模板列：2fr 1fr；网格模板行：100px 100p

我不明白为什么页脚没有填满整个屏幕底部。注意：如果我试图延伸到那个角落而不是页脚，它也会留下空白。只是拒绝用内容填充该区域。我的项目只包括我在这里展示的css和html。它在chrome中的行为相同

HTML:

结果：

您在css中忘记了冒号。它应该是

网格区域：页脚除了你有网格区页脚。现在，在下面的代码片段中为您修复了它。你对旁白也做了同样的事。我在片段中为您解决了这个问题

.container{
高度：100vh；
显示：网格；
网格模板列：2fr 1fr；
网格模板行：100px 100px 100px；
栅隙：10px；
网格模板区域：“页眉”“主边”“页脚”；
}
标题{
网格区域：标题；
背景色：青色；
}
主要{
网格区域：主；
背景颜色：浅蓝色；
}
旁白{
网格区域：侧边；
背景颜色：绿色；
}
页脚{
网格区域：页脚；
背景颜色：灰色；
}

标题
主要的
在一边
页脚
wow。这就解释了为什么旁白也在做同样的事情！谢谢你的眼球@小错误可能需要几个小时才能解决。接受对你有用的答案，让别人知道它也有用
<body>
  <div class="container">
    <header> header</header>
    <main>main</main>
    <aside>aside</aside>
    <footer>footer</footer>
  </div>
</body>

.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;
}