CSS网格行应始终覆盖

Question

在此示例中，我使用CSS网格。在这种情况下，网格包含的内容并不那么重要。

容器.wrap的背景为红色。我希望asideand main行一直向下延伸以填充upp .wrap。这意味着应该不再看到红色背景，而用灰色和白色覆盖。

如本例所示，我使用了这种方法，1fr但是在这种情况下并没有太大作用。我也尝试过，auto但没有区别。

* {
  padding: 0;
  margin: 0;
  color: #fff;
}

.wrap {
  height: 300px;
  background: red;
}

.content {
  background: green;
  display: grid;

  grid-template-areas: "header header"
                        "aside main"
                       "footer footer";
                       
  grid-template-columns: 300px 1fr;
  grid-template-rows: 48px 1fr 50px;
}

header {
  grid-area: header;
  background: black;
}

aside {
  grid-area: aside;
  background: #333;
}

main {
  grid-area: main;
  background: #fff;
  color: #000;
}

footer {
  grid-area: footer;
  background: blue;
}

<div class="wrap">
  <div class="content">
    <header>Header</header>
    <aside>Aside</aside>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>

Answer 1

您需要设置height: 100%上.content为好，使电网的填充.wrap这台父height。

* {
  padding: 0;
  margin: 0;
  color: #fff;
}

.wrap {
  height: 300px;
  background: red;
}

.content {
  background: green;
  display: grid;

  grid-template-areas: "header header"
                        "aside main"
                       "footer footer";
                       
  grid-template-columns: 300px 1fr;
  grid-template-rows: 48px 1fr 50px;
  height: 100%; /* Added */
}

header {
  grid-area: header;
  background: black;
}

aside {
  grid-area: aside;
  background: #333;
}

main {
  grid-area: main;
  background: #fff;
  color: #000;
}

footer {
  grid-area: footer;
  background: blue;
}

<div class="wrap">
  <div class="content">
    <header>Header</header>
    <aside>Aside</aside>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>