Html 我怎样才能得到100%的高度来填满窗口的剩余部分？

所以我有一个左导航，可以进出。我在这里举了一个小例子，没有突然出现：

但正如您所看到的，左导航

高度：100%

在窗口下方增加了更多空间，您可以向下滚动。但是我怎样才能使左侧导航的高度刚好填满窗口而不增加更多空间呢

HTML:

---

预期内容不会溢出窗外。也许有一种更好的方法来编写此代码，然后使用或依赖

height 100%

您可以使用CSS

calc（）

属性从导航容器的高度（vh单位）中扣除像素量：

html，
身体{
身高：100%；
填充：0；
保证金：0；
}
.全部{
身高：100%；
}
.标题{
边框底部：1px纯黑；
高度：40px；
}
.leftnav容器{
高度：计算（100vh-61px）；
位置：相对位置；
}
.弹出按钮{
位置：绝对位置；
排名：0；
背景颜色：浅蓝色；
宽度：270px；
身高：100%；
过渡：0.4s；
溢出：滚动；
填充：10px；
}

标题
左导航内容

您可以使用CSS

calc（）

属性从导航容器的高度（vh单位）中扣除像素量：

html，
身体{
身高：100%；
填充：0；
保证金：0；
}
.全部{
身高：100%；
}
.标题{
边框底部：1px纯黑；
高度：40px；
}
.leftnav容器{
高度：计算（100vh-61px）；
位置：相对位置；
}
.弹出按钮{
位置：绝对位置；
排名：0；
背景颜色：浅蓝色；
宽度：270px；
身高：100%；
过渡：0.4s；
溢出：滚动；
填充：10px；
}

标题
左导航内容

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建。寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现该问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请看：如何创建一个。很好地把答案放在一起。Calc是一种解决方案。Flexbox是另一个。我们把答案放在一起。Calc是一种解决方案。Flexbox是另一个。

<div class="all">
   <div class="header">header</div>
   <div class="leftnav-container">
       <! -- will be animated to pop in and out -->
       <div class="flyout">
          left nav content
       </div>
   </div>
</div>

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.all {
  height: 100%;
}
.header {
  border-bottom: 1px solid black;
  height:40px;
}
.leftnav-container {
  height: 100%;
  position: relative;
}
.flyout {
  position: absolute;
  top: 0;
  background-color: lightblue;
  width: 270px;
  height: 100%;
  transition: 0.4s;
  overflow: scroll;
  padding: 10px;
}