使div填充剩余屏幕空间的高度 [英] Make a div fill the height of the remaining screen space

问题描述

我目前正在处理一个网络应用程序，其中我想让内容填满整个屏幕的高度。

I am currently working on a web application, where I want the content to fill the height of the entire screen.

页面有一个标题，包含一个徽标和帐户信息。这可以是任意高度。

The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.

我有一个标题 div 一个内容 div 。目前我使用的表格布局如下：

I have a header div and a content div. At the moment I am using a table for the layout like so:

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％。将标头放在内容中将不允许此操作。

For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with it's height set to 100%. Putting header inside content will not allow this to work.

有没有办法实现相同的效果，而不使用表？

Is there a way to achieve the same effect without using the table?

更新： / strong>

Update:

内容 div 中的元素也将高度设置为百分比。因此，在 div 内的100％处，将填充到底部。

Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.

更新2：

Update 2:

推荐答案

2015更新：flexbox方法

解决方案

还有两个其他答案简要说明了 flexbox ;然而，这是两年多前，他们没有提供任何例子。

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

注意：虽然CSS Flexible Boxes布局规范是在候选推荐阶段，但并非所有浏览器都具有实现它。 WebKit实现必须以-webkit-作为前缀。 Internet Explorer实现旧版本的规范，前缀为-ms-; Opera 12.10实现了规范的最新版本，无前缀。请参阅每个媒体资源的兼容性表，了解最新的兼容性状态。

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

（摘自 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes ）

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

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

要检查当前支持，您还可以在这里看到：
http://caniuse.com/#feat=flexbox

To check current support you can also see here: http://caniuse.com/#feat=flexbox

通过flexbox，您可以轻松地在任意行或列之间切换，这些行或列具有固定的尺寸，内容大小的维度或剩余空间维度。在我的例子中，我已经设置标题捕捉到其内容（根据OPs问题），我添加了一个页脚，以显示如何添加固定高度的区域，然后设置内容区域填充剩余的空间。

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

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>

上面， flex 属性会缩短 flex-grow ， flex-shrink 和 flex-basis 属性来建立flex项目的灵活性。 Mozilla有有关灵活框模型的良好介绍。

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

这篇关于使div填充剩余屏幕空间的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！