我正在开发一个web应用程序，我希望内容能够填满整个屏幕的高度。
该页面有一个标题，其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。
我有一个header div和一个content div。目前，我正在为布局使用一个表，如下所示：
CSS和HTML
#第页{高度：100%；宽度：100%}#td含量{高度：100%；}#内容{溢出：自动；/*或溢出：隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>
页面的整个高度已填充，不需要滚动。
对于contentdiv中的任何内容，设置top:0；会把它放在标题下面。有时内容将是一个真实的表格，其高度设置为100%。将标题放在内容内不允许这样做。
有没有一种方法不使用桌子就能达到同样的效果？
更新：
contentdiv中的元素也将高度设置为百分比。因此，div中100%的内容将填充到底部。50%的两个元素也是如此。
更新2:
例如，如果标题占屏幕高度的20%，则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止，把整个东西包在桌子里是唯一有效的方法。
原来的帖子是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>
如果您可以处理不支持旧浏览器（即MSIE 9或更旧版本）的问题，您可以使用已经是W3C CR的Flexible Box Layout Module来完成此操作。该模块还允许其他不错的技巧，例如重新排序内容。
不幸的是，MSIE 9或更低版本不支持此功能，您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也很快放弃前缀。
另一种选择是CSS网格布局，但稳定版本的浏览器对它的支持甚至更少。实际上，只有MSIE10支持这一点。
2020年更新：所有现代浏览器都支持display:flex和display:grid。唯一缺少的是对子网格的支持，只有Firefox才支持。请注意，MSIE不支持规范中的任何一个，但如果您愿意添加MSIE特定的CSS黑客，则可以使其行为正常。我建议干脆忽略MSIE，因为即使是微软也表示不应该再使用它了。Microsoft Edge很好地支持这些功能（除了子网格支持，因为它与Chrome共享Blink渲染引擎）。
使用显示的示例：网格：
html，正文{最小高度：100vh；填充：0；边距：0；}身体{显示：栅格；网格：“myheader”自动“mymain”最小值（0,1fr）“myfooter”自动/最小最大值（10rem，90rem）；}头球{网格区域：myheader；背景：黄色；}主要的{网格区域：mymain；背景：粉色；对齐自身：居中/*或拉伸+显示：柔性；+弯曲方向：柱；+对齐内容：中心*/}页脚{网格区域：myfooter；背景：青色；}<header>标题内容</header><main>应居中的主要内容，内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本，可以使用更多的垂直空间</p＞<p>下面是一些文字，可以使用更多的垂直空间（2）</p＞<p>下面是一些文字，可以使用更多的垂直空间（3）</p＞<p>下面是一些文字，可以使用更多的垂直空间（4）</p＞<p>下面是一些文字，可以使用更多的垂直空间（5）</p＞</details></main><footer>页脚内容</footer>
使用display的示例：flex：
html，正文{最小高度：100vh；填充：0；边距：0；}身体{显示：柔性；}主要的{背景：粉色；对齐自身：中心；}<main>应居中的主要内容，内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本，可以使用更多的垂直空间</p＞<p>下面是一些文字，可以使用更多的垂直空间（2）</p＞<p>下面是一些文字，可以使用更多的垂直空间（3）</p＞<p>下面是一些文字，可以使用更多的垂直空间（4）</p＞<p>下面是一些文字，可以使用更多的垂直空间（5）</p＞</details></main>
免责声明：公认的答案给出了解决方案的想法，但我发现它有点臃肿，因为不必要的包装和css规则。下面是一个只有很少css规则的解决方案。
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
上面的解决方案使用视口单元和flexbox，因此是IE10+，前提是您使用IE10的旧语法。
要使用的代码笔：指向代码笔的链接
或者这一个，对于那些需要主容器在内容溢出时可滚动的人：链接到codepen
