使网格中的 div 拉伸到全高

Question

我有一个非常简单的菜单、标题和内容的网格布局。

我希望内容（蓝色框）垂直拉伸。如您所见，网格元素（黄色框）已经垂直拉伸，但其中的蓝色元素（应该是动态内容）没有。

有没有办法实现这一点 1) 无需将整个网格结构切换为 flexbox 和 2) 无需使用 calc 将蓝色内容 100vh 减去标题高度？

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "menu header" "menu content";
  box-sizing: border-box;
  overflow: hidden;
}

.mainMenuWrapper {
  grid-area: menu;
  height: auto;
}

.headerWrapper {
  grid-area: header;
  height: auto;
}

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
}

.menu {
  height: 100vh;
  background-color: red;
  width: 50px;
}

.header {
  height: 80px;
  background-color: green;
}

.content {
  background-color: blue;
  width: 100%;
  height: ???
}

<div class="container">
  <div class="mainMenuWrapper">
    <div class="menu">
      menu
    </div>
  </div>
  <div class="headerWrapper">
    <div class="header">
      header
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      content
    </div>
  </div>
</div>

图片：

JSFiddle 链接：https://jsfiddle.net/the2sj1n/3/

Answer 1

您可以在那个蓝色框.content上申请height: 100%

body {
  margin: 0; /*Removed unexpected margins from browsers' default styles*/
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "menu header" "menu content";
  box-sizing: border-box;
  overflow: hidden;
}

.mainMenuWrapper {
  grid-area: menu;
  height: auto;
}

.headerWrapper {
  grid-area: header;
  height: auto;
}

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
}

.menu {
  height: 100vh;
  background-color: red;
  width: 50px;
}

.header {
  height: 80px;
  background-color: green;
}

.content {
  background-color: blue;
  width: 100%;
  height: 100%; /*The change here*/
}

<div class="container">
  <div class="mainMenuWrapper">
    <div class="menu">
      menu
    </div>
  </div>
  <div class="headerWrapper">
    <div class="header">
      header
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      content
    </div>
  </div>
</div>