使 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情况下达到相同的效果?

更新:

content div元素的高度也将设置为百分比。因此, div内 100%的内容将填充到底部。两个元素占 50%。

更新 2:

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

答案

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,您可以轻松地在具有固定尺寸,内容尺寸尺寸或剩余空间尺寸的任何行或列之间进行切换。在我的示例中,我设置了标头使其与内容对齐(按照 OP 问题),添加了页脚以显示如何添加固定高度的区域,然后设置内容区域以填充剩余的空间。

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属性是flex-growflex-shrinkflex-basis属性的简写形式,以建立 flex 项目的灵活性。 Mozilla 很好地介绍了弹性盒模型

在 CSS 中,确实没有声音,跨浏览器的方式可以做到这一点。假设布局复杂,则需要使用 JavaScript 设置元素的高度。您需要做的实质是:

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

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

另外,假设您的内容可能大于视口,则需要设置溢出 y 来滚动。

最初的帖子已经超过 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>

您可以使用 CSS 表来代替在标记中使用表。

标记

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

(相关)CSS

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

FIDDLE1FIDDLE2

此方法的一些优点是:

1)减少标记

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

3)浏览器支持非常好 :IE8 +,所有现代浏览器和移动设备( caniuse


仅出于完整性考虑,以下是CSS 表格模型的 css 属性的等效 Html 元素

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 }

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

如果希望中间元素垂直跨整个页面,则可以使用 CSS3 中引入的calc()

假设我们具有固定的高度 headerfooter元素,并且我们希望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;
}

因此,这里要做的是将元素的高度加起来,然后使用calc()函数从100%扣除。

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

使用的: 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>

一个简单的解决方案,使用 flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Codepen 样本

一种替代解决方案,其 div 居于内容 div 的中心

您如何简单地使用vh来表示CSS 中的 view height

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

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

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

CSS3 简单方法

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

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

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

我检查了一下,它可在所有主要浏览器中使用: ChromeIEFireFox