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

当前回答

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

2012-09-14 08:02:34

其他回答

免责声明：公认的答案给出了解决方案的想法，但我发现它有点臃肿，因为不必要的包装和css规则。下面是一个只有很少css规则的解决方案。

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

上面的解决方案使用视口单元和flexbox，因此是IE10+，前提是您使用IE10的旧语法。

要使用的代码笔：指向代码笔的链接

或者这一个，对于那些需要主容器在内容溢出时可滚动的人：链接到codepen

2016-01-03 17:16:47

我的方法使用CSS中的calc（）函数。它计算页面上已知大小的项目时剩余的空间。

#固定尺寸{高度：2rem；背景色：红色；}#剩余填充量{背景色：蓝色；高度：计算值（100vh-2rem）；}＜div＞<div id=“fixed size”>已知大小</div><div id=“fill remaining”>填充剩余</div></div>

2023-01-15 02:03:30

这是动态计算重新分配屏幕空间，最好使用Javascript。

您可以使用CSS-IN-JS技术，如下面的lib：

https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

2016-10-13 02:28:18

对我来说，最简单的方法就是使用网格。但是，我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是，如果我们有很多嵌套的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

<!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填充剩余屏幕空间的高度

推荐文章

最新文章

标签