我正在开发一个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>
您可以使用CSS表，而不是在标记中使用表。
加成
<body>
<div>hello </div>
<div>there</div>
</body>
（相关）CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
FIDDLE1和FIDDLE2
该方法的一些优点是：
1） 较少的加价
2） 标记比表更具语义，因为这不是表格数据。
3） 浏览器支持非常好：IE8+，所有现代浏览器和移动设备（犬舍）
为了完整起见，下面是css表模型中与css财产等效的Html元素
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
编造外星人先生的想法。。。
这似乎是一个比支持CSS3的浏览器流行的灵活盒更干净的解决方案。
只需将min-height（而不是height）与calc（）一起用于内容块。
calc（）以100%开始，并减去页眉和页脚的高度（需要包含填充值）
使用“min-height”而不是“height”特别有用，因此它可以处理javascript渲染的内容和Angular2等JS框架。否则，一旦javascript呈现的内容可见，计算将不会将页脚推到页面底部。
这里是一个页眉和页脚的简单示例，两者都使用50px高度和20px填充。
Html：
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
当然，数学可以简化，但你明白了。。。
仅限CSS进近（如果高度已知/固定）
当您希望中间元素垂直跨越整个页面时，可以使用CSS3中引入的calc（）。
假设我们有一个固定高度的页眉和页脚元素，我们希望section标记采用整个可用的垂直高度。。。
Demo
假设标记和CSS应为
html，正文{高度：100%；}收割台，收割台{高度：100px；背景：灰色；}部分{高度：计算（100%-（100px+150px））；/*添加100px的页眉和150px的页脚*/背景：番茄；}页脚{高度：150px；背景色：蓝色；}<header>100px</header><section>展开我的剩余空间</section>＜footer＞150像素</footer＞
所以在这里，我要做的是将元素的高度相加，然后使用calc（）函数从100%中减去。
只需确保使用高度：100%；对于父元素。
