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


当前回答

我也有同样的问题,但我无法用上面的柔性箱解决问题。因此,我创建了自己的模板,其中包括:

具有固定大小元素的标头页脚带有滚动条的侧栏,占据剩余高度所容纳之物

我使用了flexbox,但方法更简单,只使用了财产display:flex和flex-direction:row|column:

我确实使用了angular,我希望我的组件大小是它们的父元素的100%。

关键是为所有父母设置大小(以百分比为单位),以限制他们的大小。在以下示例中,myapp高度占视口的100%。

主组件占视口的90%,因为页眉和页脚占5%。

我在这里发布了我的模板:https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

其他回答

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

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

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

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

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;}<!-- 显然,您可以使用HTML5标记,如“header”、“footer”和“section”--><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很好地介绍了灵活的盒子模型。

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

padding-bottom: 100%;

现在有很多答案,但我发现使用高度:100vh;处理需要填满整个可用垂直空间的div元素。

这样,我就不需要到处玩显示或定位了。这在使用Bootstrap制作一个仪表板时非常有用,其中我有一个侧边栏和一个主工具栏。我想让主体拉伸并填充整个垂直空间,以便我可以应用背景色。

div {
    height: 100vh;
}

支持IE9及以上版本:点击查看链接

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