我正在开发一个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网格解决方案

只需使用auto和fr值属性定义带有display:grid和grid模板行的主体。

* {边距:0;填充:0;}html格式{高度:100%;}正文{最小高度:100%;显示:栅格;网格模板行:auto 1fr auto;}收割台,收割台{填充:1em;背景:粉色;}主要的,主要的{填充:1em;背景:浅蓝色;}页脚{填料:2米;背景:浅绿色;}主:悬停{高度:2000px;/*演示中心元素的扩展*/}<header>标题</header><main>main</main><footer>页脚</footer>

网格完整指南@CSS-Tricks.com

其他回答

高度:计算(100%-650px);位置:绝对;

我也一直在寻找答案。如果您有幸能够以IE8及更高版本为目标,那么可以使用display:table和相关值来获取包含div在内的块级元素的表的呈现规则。

如果你更幸运,并且你的用户正在使用顶级浏览器(例如,如果这是你控制的计算机上的intranet应用程序,就像我的最新项目一样),你可以在CSS3中使用新的Flexible Box Layout!

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

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

div {
    height: 100vh;
}

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

已使用:高度:计算(100vh-110px);

代码:.header{height:60px;top:0;背景色:绿色}.车身{高度:计算(100vh-110px)/*50+60*/背景色:灰色;}.footer{height:50px;bottom:0;}<div class=“header”><h2>我的页眉</h2></div><div class=“body”><p>身体</p></div><div class=“footer”>我的页脚</div>

仅限CSS进近(如果高度已知/固定)

当您希望中间元素垂直跨越整个页面时,可以使用CSS3中引入的calc()。

假设我们有一个固定高度的页眉和页脚元素,我们希望section标记采用整个可用的垂直高度。。。

Demo

假设标记和CSS应为

html,正文{高度:100%;}收割台,收割台{高度:100px;背景:灰色;}部分{高度:计算(100%-(100px+150px));/*添加100px的页眉和150px的页脚*/背景:番茄;}页脚{高度:150px;背景色:蓝色;}<header>100px</header><section>展开我的剩余空间</section><footer>150像素</footer>

所以在这里,我要做的是将元素的高度相加,然后使用calc()函数从100%中减去。

只需确保使用高度:100%;对于父元素。