一个不错的方法是将css margin属性设置为“auto”。它将使div占据所有剩余的高度和宽度。

缺点是它将被计算为保证金而不是内容。

请参阅随附的屏幕截图：

仅限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%；对于父元素。

原来的帖子是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>

已使用：高度：计算（100vh-110px）；

代码：.header｛height:60px；top:0；背景色：绿色｝.车身{高度：计算（100vh-110px）/*50+60*/背景色：灰色；}.footer｛height:50px；bottom:0；｝<div class=“header”><h2>我的页眉</h2></div><div class=“body”><p>身体</p></div><div class=“footer”>我的页脚</div>

这可以通过CSS使用vh来实现：

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

和HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

我检查了一下，它适用于所有主要浏览器：Chrome、IE和FireFox

我的方法使用CSS中的calc（）函数。它计算页面上已知大小的项目时剩余的空间。

#固定尺寸{高度：2rem；背景色：红色；}#剩余填充量{背景色：蓝色；高度：计算值（100vh-2rem）；}＜div＞<div id=“fixed size”>已知大小</div><div id=“fill remaining”>填充剩余</div></div>