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


当前回答

已使用:高度:计算(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>

其他回答

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

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

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

div {
    height: 100vh;
}

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

如果您可以处理不支持旧浏览器(即MSIE 9或更旧版本)的问题,您可以使用已经是W3C CR的Flexible Box Layout Module来完成此操作。该模块还允许其他不错的技巧,例如重新排序内容。

不幸的是,MSIE 9或更低版本不支持此功能,您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也很快放弃前缀。

另一种选择是CSS网格布局,但稳定版本的浏览器对它的支持甚至更少。实际上,只有MSIE10支持这一点。

2020年更新:所有现代浏览器都支持display:flex和display:grid。唯一缺少的是对子网格的支持,只有Firefox才支持。请注意,MSIE不支持规范中的任何一个,但如果您愿意添加MSIE特定的CSS黑客,则可以使其行为正常。我建议干脆忽略MSIE,因为即使是微软也表示不应该再使用它了。Microsoft Edge很好地支持这些功能(除了子网格支持,因为它与Chrome共享Blink渲染引擎)。

使用显示的示例:网格:

html,正文{最小高度:100vh;填充:0;边距:0;}身体{显示:栅格;网格:“myheader”自动“mymain”最小值(0,1fr)“myfooter”自动/最小最大值(10rem,90rem);}头球{网格区域:myheader;背景:黄色;}主要的{网格区域:mymain;背景:粉色;对齐自身:居中/*或拉伸+显示:柔性;+弯曲方向:柱;+对齐内容:中心*/}页脚{网格区域:myfooter;背景:青色;}<header>标题内容</header><main>应居中的主要内容,内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本,可以使用更多的垂直空间</p><p>下面是一些文字,可以使用更多的垂直空间(2)</p><p>下面是一些文字,可以使用更多的垂直空间(3)</p><p>下面是一些文字,可以使用更多的垂直空间(4)</p><p>下面是一些文字,可以使用更多的垂直空间(5)</p></details></main><footer>页脚内容</footer>

使用display的示例:flex:

html,正文{最小高度:100vh;填充:0;边距:0;}身体{显示:柔性;}主要的{背景:粉色;对齐自身:中心;}<main>应居中的主要内容,内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本,可以使用更多的垂直空间</p><p>下面是一些文字,可以使用更多的垂直空间(2)</p><p>下面是一些文字,可以使用更多的垂直空间(3)</p><p>下面是一些文字,可以使用更多的垂直空间(4)</p><p>下面是一些文字,可以使用更多的垂直空间(5)</p></details></main>

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

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

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

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

当内容太高时,需要底部div滚动时,发布的解决方案都不起作用。在这种情况下,有一个解决方案:

.表格{显示:表格;}.table行{显示:表格行;}.表格单元格{显示:表格单元格;}.容器{宽度:400px;高度:300px;}.页眉{背景:青色;}.车身{背景:黄色;高度:100%;}.正文内容外包装{高度:100%;}.正文内容内包装{高度:100%;位置:相对;溢出:自动;}.正文内容{位置:绝对;顶部:0;底部:0;左:0;右:0;}<div class=“table container”><div class=“table row header”><div>这是高度未知的标头</div><div>这是高度未知的标头</div><div>这是高度未知的标头</div></div><div class=“table row body”><div class=“table cell body content outer wrapper”><div class=“body content inner wrapper”><div class=“body content”><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div></div></div></div></div></div>

原始来源:在CSS中处理溢出时填充容器的剩余高度

JSFiddle实时预览