我正在开发一个web应用程序，希望内容能够填满整个屏幕的高度
该页面有一个标题，其中包含徽标和帐户信息。这可能是任意高度。我希望content div将页面的其余部分一直填充到底部
我有一个标题div和一个内容div。目前，我正在使用表格进行布局，如下所示：
CSS和HTML
\page{
高度：100%；宽度：100%
}
#TDC含量{
身高：100%；
}
#内容{
溢出：自动；/*或溢出：隐藏*/
}<；table id=“page”>；
<；tr>；
<；td id=“tdheader”>；
<；div id=“header”></部门>；
</td>；
</tr>；
<；tr>；
<；td id=“tdcontent”>；
<；div id=“content”></部门>；
</td>；
</tr>；
</表>页面的整个高度已填充，无需滚动
对于content div中的任何内容，设置top:0将把它放在标题的正下方。有时，内容将是一个真实的表格，其高度设置为100%。将标题放入内容将不允许此操作
有没有一种方法可以在不使用表的情况下达到相同的效果
更新：
内容div中的元素的高度也将设置为百分比。因此，div中100%的内容将填充到底部。两种元素的比例为50%
更新2:
例如，如果标题占据屏幕高度的20%，则在#content中指定为50%的表格将占据40%的屏幕空间。到目前为止，将整个东西包装在一张桌子上是唯一有效的方法
2015年更新：flexbox方法
还有另外两个答案简要提及flexbox；然而，那是两年多以前的事了，他们没有提供任何例子。flexbox的规格现在已经确定
注意：尽管CSS柔性框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。WebKit实现必须以-WebKit-作为前缀；InternetExplorer实现了一个旧版本的规范，前缀为-ms-；Opera 12.10实现了规范的最新版本，未修复。有关最新的兼容性状态，请参见每个属性上的兼容性表
（摘自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
所有主要浏览器和IE11+都支持Flexbox。对于IE 10或更早版本，可以使用FlexieJS垫片
要检查当前的支持，您还可以在此处查看：
http://caniuse.com/#feat=flexbox
工作示例
使用flexbox，您可以轻松地在具有固定尺寸、内容尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我将页眉设置为捕捉到其内容（根据OPs问题），我添加了一个页脚以显示如何添加固定高度区域，然后设置内容区域以填充剩余空间
html，
身体{
身高：100%；
保证金：0；
}
.盒子{
显示器：flex；
柔性流动：柱；
身高：100%；
}
.包厢{
边框：1px点灰色；
}
.box.row.header{
flex:01自动；
/*以上简称为：
flex-grow:0，
弹性收缩：1，
弹性基础：自动
*/
}
.box.row.content{
flex:1自动；
}
.box.row.footer{
flex:01140px；
}<；！--显然，您可以使用HTML5标记，如“header”、“footer”和“section”->；
<；div class=“box”>；
<；div class=“行标题”>；
<；p>&书信电报；b>；标题</b>；
<；br/>；
<；br/>；（按内容调整大小）</p>；
</部门>；
<；div class=“行内容”>；
<；p>；
<；b>；内容</b>；
（填充剩余空间）
</p>；
</部门>；
<；div class=“行页脚”>；
<；p>&书信电报；b>；页脚</b>；（固定高度）</p>；
</部门>；
</部门>在上面的CSS中，flex属性简化了flex grow、flex shrink和flex basis属性，以建立flex项的灵活性。Mozilla很好地介绍了flexible Box模型