让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>

---

2015年更新：flexbox方法

还有其他两个简要提及flexbox的答案; 然而，那是两年多以前，他们没有提供任何例子。 Flexbox的规格现在已经确定。

注意：尽管CSS灵活框布局规范处于候选推荐阶段，但并非所有浏览器都已实现它。 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中。 假设你的布局有复杂性，你需要使用JavaScript来设置元素的高度。 你需要做的事情的本质是：

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

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

另外，假设你的内容可能比视口大，你需要设置overflow-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>

链接地址: http://www.djcxy.com/p/2541.html

上一篇: Make a div fill the height of the remaining screen space

下一篇: Is there a business reason for striving for pure CSS layout?