了解CSS网格中的auto

Question

我对Web开发非常陌生，我正在尝试学习CSS网格。在学习CSS网格时，我尝试制作一种简单的布局。它具有一个页眉节，一个菜单节，一个侧边栏节和一个页脚节。

我在为第二行定义网格模板行时使用了auto，并且使conatiner高度为100％，因此第二行将在行1和行2剩余的剩余空间中完全拉伸。但这不是那样的，我试图弄清楚为什么第二行在剩余的剩余空间中没有垂直伸展。

这里是container css，其中我将第二行定义为auto，而container height为100％。

.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
}

中键链接：https://jsfiddle.net/791vtd4z/

Answer 1

那是因为您没有给body设置一个固定的高度：因此，当子级.container的高度为100％时，它只会拉伸到其内容高度，而不会进一步扩展，因为没有相对可比较的东西。

您可以设置body { height: 100vh; }来解决此问题：

* {
  margin: 0;
  top: 0;
  bottom: 0;
  font-family: sans-serif;
  font-size: 1.2em;
}

title {
  display: none;
}

body {
  height: 100vh;
}

.container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
}

.Header {
  background-color: beige;
  grid-column: 1/-1;
}

.Menu {
  background-color: red;
}

.Sidebar {
  background-color: burlywood;
  grid-column: 2/-1;
}

.Footer {
  background-color: aquamarine;
  grid-column: 1/-1;
}

<div class="container">
  <div class="Header">Header</div>
  <div class="Menu">Menu</div>
  <div class="Sidebar">Sidebar</div>
  <div class="Footer">Footer</div>
</div>