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

当前回答

这可以通过CSS使用vh来实现：

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

和HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

我检查了一下，它适用于所有主要浏览器：Chrome、IE和FireFox

2014-09-14 21:09:51

其他回答

<!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

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

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

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

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

2008-09-18 08:16:50

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

.divName {
    height: stretch
}

2021-03-03 23:56:21

为什么不这样呢？

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

给html和body（按顺序）一个高度，然后给元素一个高度？

为我工作

2012-02-20 09:21:45

使用flexbox的简单解决方案：

html，正文{高度：100%；}正文{显示：柔性；弯曲方向：柱；}.内容{挠曲生长：1；}<body><div>标题</div><div class=“content”></div></body>

Codepen示例

另一种解决方案，在content div中以div为中心

2015-02-27 18:21:05

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

推荐文章

最新文章

标签