创建一个高度等于剩余可用空间的div

Question

我知道这是一个已经被问到的问题，但是在我的页面上找不到解决方案。

我有一个页面：

1. 固定高度的标题：60px
2. 子标题div：基于内容的高度动态
3. 搜索div：基于内容的高度动态

4. 全日历div：此div必须等于可容纳屏幕的剩余空间

     <header style="height:60px">LOGO + HORIZONTAL MENU</header>
     <div id="sub-header">SOME CONTENT HERE...</div>
     <div id="search-div">SOME CONTENT HERE FOR SEARCH...</div>
     <div id="fc-div"><div id="calendar"></div></div>
   

我想设置fc-div来获取剩余空间的高度，以防止滚动y

Answer 1

如果将主体（或任何父div）设置为100vh的高度，则将其设置为带有direction：列的flex组件，并给fc-div设置flex-grow为1，我认为它应该可以工作。所以：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#fc-div {
  flex-grow: 1;
}


/* for demo */
body {
  margin:0;
}

#fc-div {
  background:gray;/* see me */
}

<header style="height:60px">LOGO + HORIZONTAL MENU</header>
<div id="sub-header">SOME CONTENT HERE...</div>
<div id="search-div">SOME CONTENT HERE FOR SEARCH...</div>
<div id="fc-div">
  <div id="calendar"></div>
</div>

编辑：在fc-div之前缺少'＃'