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


当前回答

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

其他回答

<!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上的双滚动条(它始终显示视口滚动条,但禁用),但如果没有它,如果溢出,内容将被剪切。

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

实际上,您可以使用display:table将区域拆分为两个元素(页眉和内容),其中页眉的高度可以不同,而内容将填充剩余的空间。这适用于整个页面,也适用于区域仅是位置设置为相对、绝对或固定的另一个元素的内容的情况。只要父元素具有非零高度,它就可以工作。

请参见此小提琴以及以下代码:

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>

在CSS中,确实没有一种可靠的跨浏览器方式来实现这一点。假设您的布局很复杂,您需要使用JavaScript来设置元素的高度。你需要做的本质是:

Element Height = Viewport height - element.offset.top - desired bottom margin

一旦您可以获得该值并设置元素的高度,就需要将事件处理程序附加到窗口onload和onresize,以便可以启动调整大小函数。

此外,假设内容可能大于视口,则需要将overflow-y设置为滚动。

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

padding-bottom: 100%;