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

当前回答

如果在父div上使用display:flex，您所要做的就是简单地设置高度以进行拉伸或填充

.divName {
    height: stretch
}

2021-03-03 23:56:21

其他回答

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

padding-bottom: 100%;

2011-10-17 14:00:39

您可以使用CSS表，而不是在标记中使用表。

加成

<body>    
    <div>hello </div>
    <div>there</div>
</body>

（相关）CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1和FIDDLE2

该方法的一些优点是：

1）较少的加价

2）标记比表更具语义，因为这不是表格数据。

3）浏览器支持非常好：IE8+，所有现代浏览器和移动设备（犬舍）

为了完整起见，下面是css表模型中与css财产等效的Html元素

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

2013-06-06 11:20:33

当内容太高时，需要底部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实时预览

2015-02-20 17:12:17

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

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

2011-04-11 15:48:06

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；}<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很好地介绍了灵活的盒子模型。

2014-07-27 08:14:37

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

推荐文章

最新文章

标签