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


我目前正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度。

该页面有一个标题,其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。

我有一个标题 div 和内容 div。目前我正在使用表格进行布局,如下所示:

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度都已填满,无需滚动。

对于内容div中的任何内容,设置 top: 0; 将它放在标题下面。有时内容将是一个真实的桌子,其高度设置为100%。把 header 内 content 不会允许这个工作。

有没有办法在不使用的情况下达到相同的效果 table

更新:

内容中的元素 div 将高度设置为百分比。所以内部100%的东西 div 将填充到底部。两个元素也将达到50%。

更新2:

例如,如果标题占据屏幕高度的20%,则表格内部指定为50% #content 将占用屏幕空间的40%。到目前为止,将整个事物包装在表中是唯一有效的方法。


1337
2017-09-18 05:06


起源


对于将来在这里磕磕绊绊的人,您可以在大多数浏览器中获得所需的表格布局,而无需使用表格标记, display:table 和相关的属性,请参阅 这个答案 一个非常相似的问题。 - AmeliaBR
我试图接收你的设置 - jsfiddle.net/ceELs  - 但它不起作用,我错过了什么? - Gill Bates
@先生。 Alien的答案很简单实用,请查看 http://stackoverflow.com/a/23323175/188784 - Gohan
实际上,即使使用表格,您描述的内容也不起作用:如果内容占用的空间比屏幕高度更大,则表格单元格和整个表格将扩展到屏幕底部以外。您的内容溢出:auto不会显示滚动条。 - Damien
@GillBates它将在您指定父元素的高度后工作 jsfiddle.net/ceELs/5 - Michal Vašut


答案:


2015年更新:flexbox方法

还有两个简单提及的答案 Flexbox的;然而,这是两年多以前的事了,他们没有提供任何例子。 flexbox的规范现在已经确定。

注意:尽管CSS Flexible Boxes Layout规范处于候选推荐阶段,但并非所有浏览器都实现了它。 WebKit实现必须以-webkit-为前缀; Internet Explorer实现了旧版本的规范,前缀为-ms-; Opera 12.10实现了最新版本的规范,没有前缀。有关最新的兼容性状态,请参阅每个属性的兼容性表。

(取自 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

所有主流浏览器和IE11 +都支持Flexbox。对于IE 10或更早版本,您可以使用FlexieJS垫片。

要查看当前支持,您还可以在此处查看: http://caniuse.com/#feat=flexbox

工作实例

使用flexbox,您可以轻松地在具有固定尺寸,内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中,我将标题设置为与其内容对齐(根据OPs问题),我添加了一个页脚来显示如何添加固定高度区域,然后设置内容区域以填充剩余空间。

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

在CSS上面, 柔性 财产短缺 FLEX-增长弯曲收缩,和 柔性基础 属性以建立弹性项目的灵活性。 Mozilla有一个 柔性盒模型的良好介绍


668
2017-07-27 08:14



为什么 flex: 0 1 30px; 属性 box .row 因为它在每个div中都被覆盖了? - Erdal G.
这是对flexbox的浏览器支持 - 很高兴看到所有的绿色 - caniuse.com/#feat=flexbox - Brian Burns
肯定这是一个非常好的方法,它几乎可以工作;)当div.content的内容超过原始的弹性高度时,有一个小问题。在当前的实现中,“页脚”将被推低,这不是开发人员期望的;)所以我做了一个非常简单的修复。 jsfiddle.net/przemcio/xLhLuzf9/3 我在容器和溢出滚动上添加了additioal flex。 - przemcio
@przemcio不错,但我不认为可滚动内容是每个开发人员所期望的;) - 你应该只需要添加 overflow-y: auto 至 .row.content 然而,要实现你所需要的。 - Pebbl
如果你把100vh放在.box上似乎工作。 - Steve Bennett


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

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

一旦你可以获得这个值并设置元素的高度,你需要将事件处理程序附加到窗口onload和onresize,以便你可以激活你的resize函数。

此外,假设您的内容可能比视口大,则需要设置overflow-y进行滚动。


207
2017-09-18 08:16



这就是我所怀疑的。但是,该应用程序也将关闭Javascript,所以我想我会继续使用该表。 - Vincent McNabb
文森特,坚持自己的立场。我当时想做同样的事情,用css看起来不可能吗?我不确定,但无论其他大量的解决方案都没有做到你所描述的。 javascript one是唯一一个在这一点上正常工作的。 - Travis
如果窗口高度改变怎么办 - Techsin
@Techsin使用jquery或喜欢绑定到窗口调整大小的事件:$(window).bind('resize orientationchange',doResize); - Emeka
我的意思是......为什么我们在2013年不使用计算? - kamii


原帖是3年多以前的。我想很多像我这样来这篇文章的人都在寻找类似应用程序的布局解决方案,比如以某种方式固定页眉,页脚和全高内容占据了剩下的屏幕。如果是这样,这篇文章可能有所帮助,它适用于IE7 +等。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

以下是该帖子的一些片段:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>


153
2017-10-21 15:02



这只有一个问题:页眉和页脚不是自动调整大小的。 那 是真正的困难,而且 那 为什么“这是不可能的”答案目前在顶部...... - Roman Starkov
即使它不是原始问题的解决方案,这对我有所帮助 - 所以非常感谢你:) - Luke Sampson
我需要一个55px的标题和一个填充文档高度其余部分的div。这是解决方案! - Matías Cánepa
你是炸弹,我一直在尝试这个,这是我找到的唯一解决方案。我需要我的导航元素在顶部高度为60px,其余部分为100%,这解决了它。 - Adam Waite
.col不使用,是吗? - slartidan


您可以使用CSS表,而不是在标记中使用表。

标记

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(相关)CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 和 FIDDLE2

这种方法的一些优点是:

1)减少标记

2)标记比表更具语义,因为这不是表格数据。

3)浏览器支持 很好:IE8 +,所有现代浏览器和移动设备(我可以用吗


为了完整性,这里有等效的Html元素到css属性 CSS表模型

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

134
2018-06-06 11:20



我刚刚指出 css表的技术。原来答案已经在这个已回答的问题中已经存在。这是 该 最佳解决方案干净,优雅,并按照预期的确切方式使用精确的工具。 CSS表格 - Ian Boyd
小提琴代码与这里的答案不太匹配。添加 html, body { height: 100%, width: 100% } 在我的测试中似乎很关键。 - mlibby
CSS表的烦人功能与普通表完全相同:如果内容太大,则扩展单元格以适应。这意味着您可能仍需要限制大小(max-height),或者如果页面是动态的,则从代码设置高度。 我真的很想念Silverlight的网格! :( - Gone Coding
您始终可以在表格行元素中添加绝对定位的容器,然后将其宽度和高度设置为100%。记住也要在table-row元素上将position设置为relative。 - Mike Mellor
@MikeMellor在IE11中不起作用,因为它似乎忽略了 relative 定位于 table-row 元素因此取得第一个位置上升的高度,而不是表格元素。 - Dwelle


仅CSS方法(如果高度已知/固定)

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

假设我们有一个 固定高度  header 和 footer 元素,我们想要的 section 标记以获取整个可用的垂直高度...

演示

假定加价

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

所以你的CSS应该是

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

所以在这里,我们正在做的是,将元素的高度相加而不是从中扣除 100% 运用 calc() 功能。

只要确保你使用 height: 100%; 对于父元素。


76
2018-04-27 12:05



OP表示标题可以是任意高度。因此,如果您事先不知道高度,您将无法使用calc :( - Danield
@Danield这就是我提到的原因 固定高度 :) - Mr. Alien
这个解决方案对我有用,并且不需要我重新设计我在Flexbox上的现有页面。如果您使用LESS,即Bootstrap,请务必阅读 coderwall 发布如何转义calc()函数,以便LESS不处理它。 - jlyonsmith
Op说'这可能是一个任意的高度'。任意手段由设计师决定,因而固定。这个解决方案是目前最好的解决方案。 - jck


用过的: height: calc(100vh - 110px);

码:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>


37
2018-05-22 03:20





它可以完全由 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>

我查了一下,它适用于所有主流浏览器: ChromeIE,和 FireFox


24
2017-09-14 21:09



哇,从未听说过 vh 和 vw 单位之前。更多信息: snook.ca/archives/html_and_css/vm-vh-units - Steve Bennett
啊,每天都在学习,感谢VH和Vw @ormoz - Shekhar Pankaj
不幸的是,这不支持IE8 :( - Scott
我试过这种方法,但是 height: 100% 上 #content 导致它的高度与之相匹配 #page,无视 #tdcontent完全是高度。滚动条有很多内容,超出了页面底部。 - Brandon Mintern


当内容太高时需要底部div滚动时,没有任何解决方案发布。这是一个适用于这种情况的解决方案:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</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>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

JSFiddle实时预览


22
2018-02-20 17:12



谢谢!!!我尝试了所有非table,non-flexbox答案,这是唯一一个100%正确工作的答案。一个问题:原始来源只有一个 body-content-wrapper如果没有双层包装(没有任何东西,似乎工作得很好) table-cellS)。这样做有问题吗? - Brandon Mintern
@BrandonMintern如果你没有table-cells,它在IE8和IE9中不起作用。 (参见原始文章中的评论。) - John Kurlak
是的,在IE10中也需要细胞。不幸的是,在IE10及以下版本中 .body 高度最终与设置的高度相同 .container。垂直滚动条仍然在正确的位置,但是 .container 最终变得比我们想要的更大。当它是全屏时,底部 .body 离开了屏幕的底部。 - Brandon Mintern


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

如果您更幸运并且您的用户使用的是顶级浏览器(例如,如果这是您控制的计算机上的Intranet应用程序,就像我的最新项目一样),您可以使用新的 灵活的盒子布局 在CSS3中!


21
2018-04-11 15:48





对我有用的(在另一个div中使用div而我在其他所有情况下都假设)是将底部填充设置为100%。也就是说,将其添加到您的css / stylesheet:

padding-bottom: 100%;

20
2017-10-17 14:00



100%的是什么?如果我尝试这个,我会得到一个巨大的空白区域,滚动开始发生。 - mlibby
100%的视口大小可能是@mlibby。如果你将html和body设置为100%高度,则div可以达到100%。只有一个div,100%将相对于div内容。我没有尝试使用嵌套div。 - Jess
它表示元素高度的100%(作为元素的填充添加),这使其高度增加一倍。不能保证它会填满页面,绝对不是问题的答案。它可能已经实际上填充了比视口更多的内容。 - Martin
padding-bottom:100%设置高度+ 100%的父容器 宽度 - Romeno