第二栏填充剩余屏幕高度不起作用

Question

我有一个导航栏，它的高度固定，在control div的下面，也有一个固定的高度，在它下面，我有另一个div calendar。日历是可滚动的。我希望日历高度的剩余屏幕高度低于control，并位于屏幕底部。这样，窗口不可滚动，只有日历可滚动。但是，设置height: 100%无效，flex: 1也无效。

当我将calendar的高度设置为固定高度时，这就是我所拥有的，但是正如我所解释的，我希望高度为屏幕尺寸的其余部分。

有什么想法吗？

.navbar {
  height: 50px;
  background-color: indianred;
}

.window {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.control  {
  height: 100px;
  background: khaki;
}

.calendar {
  height: 200px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 1500px;
  height: 1500px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

<nav class="navbar"></nav>
<div class="window">

  <div class="control">

  </div>
  
  <div class="calendar">
    <div class="wrapper">
      <div class="main">
  
        

      </div>
    </div>
  </div>

</div>

Answer 1

在下面运行此代码： 我将height: calc()方法用于导航和控件的屏幕全高减去150px。

.navbar {
  height: 50px;
  background-color: indianred;
}

.window {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.control {
  height: 100px;
  background: khaki;
}

.calendar {
  height: calc(100vh - 150px);
  width: 100%;
  bottom: 0;
  left: 0;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 1500px;
  height: 1500px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

<nav class="navbar"></nav>
<div class="window">
  <div class="control">
  </div>
  <div class="calendar">
    <div class="wrapper">
      <div class="main">
      </div>
    </div>
  </div>
</div>