我正在开发一个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很好地介绍了灵活的盒子模型。
仅限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%；对于父元素。
我的一些组件是动态加载的，这给我设置导航栏的高度带来了问题。
我所做的是使用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>
...
如果您可以处理不支持旧浏览器（即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>
