我正在开发一个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%。到目前为止，把整个东西包在桌子里是唯一有效的方法。
2015年更新：flexbox方法
还有两个答案简要提到了flexbox；然而，那是两年多前的事了，他们没有提供任何例子。flexbox的规格现在已经确定了。
注意：虽然CSS Flexible Boxes Layout规范还处于候选推荐阶段，但并不是所有浏览器都实现了它。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，您可以轻松地在具有固定维度、内容大小维度或剩余空间维度的任何行或列之间切换。在我的示例中，我设置了标题以捕捉其内容（根据OP问题），我添加了一个页脚，以显示如何添加固定高度区域，然后设置内容区域以填充剩余空间。
html，正文{高度：100%；边距：0；}.box格式{显示：柔性；柔性流：柱；高度：100%；}.box.行{边框：1px灰色虚线；}.box.row.header{flex：0 1自动；/*以上是以下内容的简写：挠曲生长：0，挠曲收缩：1，弹性基础：自动*/}.box.行内容{柔性：1 1自动；}.box.行.英尺{柔性：0 1 40px；}<!-- 显然，您可以使用HTML5标记，如“header”、“footer”和“section”--><div class=“box”><div class=“row header”><p><b>收割台，收割台</b><br/><br/>（根据内容调整大小）</p></div><div class=“row content”><p><b>内容</b>（填充剩余空间）</p></div><div class=“row footer”><p><b>页脚</b>（固定高度）</p></div></div>
在上面的CSS中，flex属性将flex-grow、flex-shrink和flex-base财产简化，以建立flex项的灵活性。Mozilla很好地介绍了灵活的盒子模型。
我的一些组件是动态加载的，这给我设置导航栏的高度带来了问题。
我所做的是使用ResizeObserver API。
function observeMainResize(){
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
$("nav").height(Math.max($("main").height(),
$("nav") .height()));
}
});
resizeObserver.observe(document.querySelector('main'));
}
那么：
...
<body onload="observeMainResize()">
<nav>...</nav>
<main>...</main>
...
编造外星人先生的想法。。。
这似乎是一个比支持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规则。下面是一个只有很少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
