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

我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。

该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。

我有一个标题div和一个内容div 。目前，我正在使用表格进行布局，如下所示：

CSS和HTML

#page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ }

<table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table>

页面的整个高度已填满，不需要滚动。

对于内容div中的任何内容，请设置top: 0; 将其放在标题的正下方。有时，内容将是一个实际表，其高度设置为100％。将header放在content中将使其无法使用。

有没有一种方法可以在不使用table情况下达到相同的效果？

更新：

content div元素的高度也将设置为百分比。因此， div内100％的内容将填充到底部。两个元素占50％。

更新2：

例如，如果标题占据了屏幕高度的20％，则在#content内指定为50％的表将占据屏幕空间的40％。到目前为止，将整个内容包装在表中是唯一有效的方法。

#1楼

我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。所以我将页面背景色设置为红色。并将内容backgroundcolor更改为白色。内容高度设置为例如。 20em或50％几乎是空白的页面不会使整个页面变成红色。

#2楼

尝试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

#3楼

如果您可以处理不支持旧版本浏览器（即MSIE 9或更旧版本）的情况，则可以使用已经是W3C CR的Flexible Box Layout Module来实现。该模块还允许其他不错的技巧，例如重新排序内容。

不幸的是，MSIE 9或更低版本不支持此功能，并且您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也尽快删除该前缀。

另一个选择是CSS Grid Layout，但是对稳定版本的浏览器的支持甚至更少。实际上，只有MSIE 10支持此功能。

#4楼

您可以使用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 +，所有现代浏览器和移动设备（ caniuse ）

仅出于完整性考虑，以下是 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 }

#5楼

实际上，您可以使用display: table将区域分为两个元素（标题和内容），其中标题的高度可以变化，内容填充剩余的空间。这适用于整个页面，以及当区域只是position设置为relative ， absolute或fixed position的另一个元素的内容时。只要父元素的高度不为零，它将起作用。

看到这个小提琴和下面的代码：

CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML：

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

来源：https://my.oschina.net/stackoom/blog/3138033

标签

Caniuse

firefox