html - 在不使用 100vh 的情况下强制 div 为整页高度

Question

这是我目前元素中的简化 HTML 和 CSS 代码。本质上，因为我使用的是 ReactJS 和路由，所以我无法将所有内容都包装在另一个带有 css 网格的容器中，因此我正在寻找解决方案以在“侧边栏”和“内容”类上获得完整的页面高度。

我知道我可以使用 100vh 并从中减去页眉的高度，但在这种情况下，页眉没有固定高度，所以我正在寻找替代方案。

.header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: lightblue;
}

.main {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
}

.sidebar {
  background-color: lightpink;
  height: 100%;
}

.content {
  background-color: orange;
  height: 100%;
}

<div class="header">
  <div>
    One
  </div>
  <div>
   Two
  </div>
</div>
<div class="main">
  <div class="sidebar">
    Menu
  </div>
  <div class="content">
    Content
  </div>
</div>

http://jsfiddle.net/de5ut6np/39/

Answer 1

你可以把 body 看作是主要的容器:

html {
 height:100%;
}

body {
 margin:0;
 height:100%;
 display: grid;
 grid-template-rows: max-content 1fr;
}

.header {
  display: grid;
  grid-template-columns: auto auto;
  background-color: lightblue;
}

.main {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
}

.sidebar {
  background-color: lightpink;
  height: 100%;
}

.content {
  background-color: orange;
  height: 100%;
}

<div class="header">
  <div>
    One<br>
    more
  </div>
  <div>
   Two
  </div>
</div>
<div class="main">
  <div class="sidebar">
    Menu
  </div>
  <div class="content">
    Content
  </div>
</div>