时间戳

首页 > 解决方案 > 第二列填充剩余屏幕高度不起作用

html - 第二列填充剩余屏幕高度不起作用

问题描述

我有一个固定高度的导航栏，在一个高度固定的controldiv 下方，在它下方我有另一个 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>

标签： htmlcssflexbox

解决方案

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

.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>

推荐阅读