使div填充剩余屏幕空间的高度

我正在开发一个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%。到目前为止，把整个东西包在桌子里是唯一有效的方法。

当前回答

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

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

2023-01-15 02:03:30

其他回答

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

2015-08-24 12:57:25

我也一直在寻找答案。如果您有幸能够以IE8及更高版本为目标，那么可以使用display:table和相关值来获取包含div在内的块级元素的表的呈现规则。

如果你更幸运，并且你的用户正在使用顶级浏览器（例如，如果这是你控制的计算机上的intranet应用程序，就像我的最新项目一样），你可以在CSS3中使用新的Flexible Box Layout！

2011-04-11 15:48:06

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

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

请参阅随附的屏幕截图：

2022-02-21 08:49:46

编造外星人先生的想法。。。

这似乎是一个比支持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));
}

当然，数学可以简化，但你明白了。。。

2016-07-01 20:53:17

这是我自己的Pebbl解决方案的最小版本。花了很长时间才找到在IE11中发挥作用的诀窍。（也在Chrome、Firefox、Edge和Safari中进行了测试。）

html格式{高度：100%；}正文{高度：100%；边距：0；}部分{显示：柔性；弯曲方向：柱；高度：100%；}div：第一个孩子{背景：金色；}div：最后一个子级{背景：李子；挠曲生长：1；}<body><章节><div>FIT</div>增长</div></section></body>

2020-04-14 21:12:21

使div填充剩余屏幕空间的高度

推荐文章

最新文章

标签