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


当前回答

高度:计算(100%-650px);位置:绝对;

其他回答

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

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

 style="height:100vh"

为我解决了这个问题。在我的案例中,我将此应用于所需的div

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

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

对我有效的方法(在另一个div中包含一个div,我假设在所有其他情况下)是将底部填充设置为100%。也就是说,将其添加到css/样式表中:

padding-bottom: 100%;

当内容太高时,需要底部div滚动时,发布的解决方案都不起作用。在这种情况下,有一个解决方案:

.表格{显示:表格;}.table行{显示:表格行;}.表格单元格{显示:表格单元格;}.容器{宽度:400px;高度:300px;}.页眉{背景:青色;}.车身{背景:黄色;高度:100%;}.正文内容外包装{高度:100%;}.正文内容内包装{高度:100%;位置:相对;溢出:自动;}.正文内容{位置:绝对;顶部:0;底部:0;左:0;右:0;}<div class=“table container”><div class=“table row header”><div>这是高度未知的标头</div><div>这是高度未知的标头</div><div>这是高度未知的标头</div></div><div class=“table row body”><div class=“table cell body content outer wrapper”><div class=“body content inner wrapper”><div class=“body content”><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div></div></div></div></div></div>

原始来源:在CSS中处理溢出时填充容器的剩余高度

JSFiddle实时预览