CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

原来的帖子是3年多前的。我想很多像我一样来这篇文章的人都在寻找一个类似于应用程序的布局解决方案，比如固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它可以在IE7+等平台上运行。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

下面是这篇文章的一些片段：

@媒体屏幕｛/*屏幕开始规则。*//*通用窗格规则*/正文｛边距：0｝.row，.col｛溢出：隐藏；位置：绝对；｝.行｛左：0；右：0；｝.col｛顶部：0；底部：0；｝.soll-x｛overflow-x:auto；｝.soll-y｛overflow-y:auto；｝.header.row｛height:75px；top:0；｝.body.row｛顶部：75px；底部：50px；｝.footer.row｛高度：50px；底部：0；｝/*屏幕结束规则。*/}<div class=“header-row”style=“background:yellow；”><h2>我的页眉</h2></div><div class=“body row scroll-y”style=“background:lightblue；”><p>身体</p></div><div class=“footer row”style=“background:#e9e9e9；”>我的页脚</div>

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

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

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

这是动态计算重新分配屏幕空间，最好使用Javascript。

您可以使用CSS-IN-JS技术，如下面的lib：

https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

对我有效的方法（在另一个div中包含一个div，我假设在所有其他情况下）是将底部填充设置为100%。也就是说，将其添加到css/样式表中：

padding-bottom: 100%;