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

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

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

我有一个标题和一个内容.目前，我正在使用表格进行布局，如下所示：divdiv

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 中的任何内容，设置会将其放在标题的正下方。有时内容将是一个真实的表格，其高度设置为 100%。放进去不会让这起作用。top: 0;headercontent

有没有办法在不使用？table

更新：

内容中的元素也将高度设置为百分比。所以里面 100% 的东西会把它填到底部。50%的两个元素也是如此。divdiv

更新 2：

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

分割线

网友回答：

在CSS中确实没有一种健全的跨浏览器方法可以做到这一点。假设你的布局很复杂，你需要使用 JavaScript 来设置元素的高度。您需要做的本质是：

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

获取此值并设置元素的高度后，需要将事件处理程序附加到窗口 onload 和 onresize，以便可以触发 resize 函数。

此外，假设您的内容可能大于视口，则需要将溢出 y 设置为滚动。

分割线

网友回答：

2015 更新：弹性框方法

还有另外两个答案简要提到弹性框;然而，那是两年多前的事了，他们没有提供任何例子。弹性框的规格现在已经确定。

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

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

要查看当前的支持，您还可以在此处查看：
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 属性简写了 flex-grow、flex-shrink 和 flex-basis 属性，以建立 flex 项目的灵活性。Mozilla对柔性盒模型有很好的介绍。

分割线

网友回答：

原帖是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>

模板简介：该模板名称为【使 div 填充剩余屏幕空间的高度】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。