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

Question

我正在一个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中的元素的高度也将设置为百分比。因此， div中100％的内容将填充到底部。两个元素占50％。

更新2：

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

Answer 1

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-grow， flex-shrink和 flex-basis属性的简写形式，以建立弹性项目的灵活性。 Mozilla具有 good introduction to the flexible boxes model。