在不使用100vh的情况下将div强制设为完整页面高度

Question

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

我确实知道我可以使用100vh并减去标头的高度，但是在这种情况下标头没有固定的高度，因此我正在寻找替代方法。

unsigned

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

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

Answer 1

您可以将主体视为主要容器：

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>

Answer 2

我像这样测试过，并且有效：

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 {
  display: grid;
  background-color: lightpink;
}

.content {
  display: grid;
  background-color: orange;
}

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