这是一个使用网格的答案。

.the-container-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto min-content;
  height: 100vh;
}
.view-to-remain-small {
  grid-row: 2;
}

.view-to-be-stretched {
  grid-row: 1
}

现在有很多答案，但我发现使用高度：100vh；处理需要填满整个可用垂直空间的div元素。

这样，我就不需要到处玩显示或定位了。这在使用Bootstrap制作一个仪表板时非常有用，其中我有一个侧边栏和一个主工具栏。我想让主体拉伸并填充整个垂直空间，以便我可以应用背景色。

div {
    height: 100vh;
}

支持IE9及以上版本：点击查看链接

我找到了一个非常简单的解决方案，因为对我来说，这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。所以我把页面的背景色设置为红色，而内容的背景色则设置为白色。当内容高度设置为例如20em或50%时，几乎为空的页面不会使整个页面变红。

对我来说，最简单的方法就是使用网格。但是，我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是，如果我们有很多嵌套的div，那就太痛苦了。

 <div style={{
  display:grid,
  gridTemplateRows:'max-content 1fr',
}}>
   <div>
     Header
   </div>
   <div style={{height:'100%',minHeight:'0'}}>
     Content
   </div>
 </div>

对于移动应用程序，我只使用VH和VW

<div class="container">
    <div class="title">Title</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

.container {
    width: 100vw;
    height: 100vh;
    font-size: 5vh;
}
    
.title {
    height: 20vh;
    background-color: red;
}
    
.content {
    height: 60vh;
    background: blue;
}
    
.footer {
    height: 20vh;
    background: green;
}

演示-https://jsfiddle.net/u763ck92/

当内容太高时，需要底部div滚动时，发布的解决方案都不起作用。在这种情况下，有一个解决方案：

.表格{显示：表格；}.table行{显示：表格行；}.表格单元格{显示：表格单元格；}.容器{宽度：400px；高度：300px；}.页眉{背景：青色；}.车身{背景：黄色；高度：100%；}.正文内容外包装{高度：100%；}.正文内容内包装{高度：100%；位置：相对；溢出：自动；}.正文内容{位置：绝对；顶部：0；底部：0；左：0；右：0；}<div class=“table container”><div class=“table row header”>＜div＞这是高度未知的标头＜/div＞＜div＞这是高度未知的标头＜/div＞＜div＞这是高度未知的标头＜/div＞</div><div class=“table row body”><div class=“table cell body content outer wrapper”><div class=“body content inner wrapper”><div class=“body content”><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div></div></div></div></div></div>

原始来源：在CSS中处理溢出时填充容器的剩余高度

JSFiddle实时预览