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


当前回答

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

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

https://github.com/cssobj/cssobj

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

其他回答

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

你可以简单地使用vh来表示CSS中的视图高度吗。。。

查看下面我为您创建的代码片段并运行它:

正文{填充:0;边距:0;}.全高{宽度:100px;高度:100vh;背景:红色;}<div class=“full-height”></div>

此外,请看下面我为您创建的图像:

这是我自己的Pebbl解决方案的最小版本。花了很长时间才找到在IE11中发挥作用的诀窍。(也在Chrome、Firefox、Edge和Safari中进行了测试。)

html格式{高度:100%;}正文{高度:100%;边距:0;}部分{显示:柔性;弯曲方向:柱;高度:100%;}div:第一个孩子{背景:金色;}div:最后一个子级{背景:李子;挠曲生长:1;}<body><章节><div>FIT</div>增长</div></section></body>

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它,所以如果您不需要支持老式浏览器,请继续。

对于移动应用程序,我只使用VH和VW

<div class="container">
    <div class="title">Title</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
.container {
    width: 100vw;
    height: 100vh;
    font-size: 5vh;
}
    
.title {
    height: 20vh;
    background-color: red;
}
    
.content {
    height: 60vh;
    background: blue;
}
    
.footer {
    height: 20vh;
    background: green;
}

演示-https://jsfiddle.net/u763ck92/