使 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也能达到同样效果的方法?

更新:

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

更新 2:

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

Used: height: calc(100vh - 110px);

code:

  
.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>
</div>

A simple solution, using 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 sample

An alternate solution, with a div centered within the content div

CSS3 Simple Way

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

all major browsers these days support it, so go ahead if you don't have requirement to support vintage browsers.

None of the solutions posted work when you need the bottom div to scroll when the content is too tall. Here's a solution that works in that case:

.table {
  display: table;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
}

.container {
width: 400px;
height: 300px;
}

.header {
background: cyan;
}

.body {
background: yellow;
height: 100%;
}

.body-content-outer-wrapper {
height: 100%;
}

.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}

.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Original source: Filling the Remaining Height of a Container While Handling Overflow in CSS

JSFiddle live preview

It could be done purely by CSS using 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;
}

and the HTML

<div id="page">

<div id=“tdcontent”></div>
<div id=“content”></div>

</div>

I checked it, It works in all major browsers: Chrome, IE, and FireFox

I've been searching for an answer for this as well. If you are fortunate enough to be able to target IE8 and up, you can use display:table and related values to get the rendering rules of tables with block-level elements including div.

If you are even luckier and your users are using top-tier browsers (for example, if this is an intranet app on computers you control, like my latest project is), you can use the new Flexible Box Layout in CSS3!

If you can deal with not supporting old browsers (that is, MSIE 9 or older), you can do this with Flexible Box Layout Module which is already W3C CR. That module allows other nice tricks, too, such as re-ordering content.

Unfortunately, MSIE 9 or lesser do not support this and you have to use vendor prefix for the CSS property for every browser other than Firefox. Hopefully other vendors drop the prefix soon, too.

An another choice would be CSS Grid Layout but that has even less support from stable versions of browsers. In practice, only MSIE 10 supports this.

Update year 2020: All modern browsers support both display: flex and display: grid. The only one missing is support for subgrid which in only supported by Firefox. Note that MSIE does not support either by the spec but if you're willing to add MSIE specific CSS hacks, it can be made to behave. I would suggest simply ignoring MSIE because even Microsoft says it should not be used anymore. Microsoft Edge supports these features just fine (except for subgrid support since is shares the Blink rendering engine with Chrome).

Example using display: grid:

html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
display: grid;
grid:
“myheader” auto
“mymain” minmax(0,1fr)
“myfooter” auto /
minmax(10rem, 90rem);
}

header
{
grid-area: myheader;
background: yellow;
}

main
{
grid-area: mymain;
background: pink;
align-self: center
/* or stretch
+ display: flex;
+ flex-direction: column;
+ justify-content: center; */
}

footer
{
grid-area: myfooter;
background: cyan;
}

<header>Header content</header>
<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>
<footer>Footer content</footer>

Example using display: flex:

html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
display: flex;
}

main
{
background: pink;
align-self: center;
}

<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>
</div>