使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

其他回答

您可以使用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

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

2011-10-21 15:02:20

对我来说，最简单的方法就是使用网格。但是，我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是，如果我们有很多嵌套的div，那就太痛苦了。

 <div style={{
  display:grid,
  gridTemplateRows:'max-content 1fr',
}}>
   <div>
     Header
   </div>
   <div style={{height:'100%',minHeight:'0'}}>
     Content
   </div>
 </div>

2022-11-03 14:00:36

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

在所有正常的浏览器中，您可以将“header”div放在内容之前，作为同级，同样的CSS也可以工作。然而，如果浮点数为100%，IE7-无法正确解释高度，因此标头需要在内容中，如上所述。溢出：auto将导致IE上的双滚动条（它始终显示视口滚动条，但禁用），但如果没有它，如果溢出，内容将被剪切。

2008-09-18 06:01:58

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

推荐文章

最新文章

标签