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

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

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

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.

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

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

我有一个页眉div和一个内容div。

CSS and HTML

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>

The entire height of the page is filled, and no scrolling is required.

填充页面的整个高度，不需要滚动。

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.

对于content div中的任何内容，设置顶部:0;将它放在标题下面。有时内容将是一个真正的表，其高度设置为100%。将header放入内容中将不允许这样做。

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

有没有一种方法可以在不使用表格的情况下达到同样的效果?

Update:

更新:

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%.

content div中的元素的高度也将设置为百分比。所以div里面100%的东西会填到底部。还有两个元素，50%

Update 2:

更新2:

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.

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

31 个解决方案

#1

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.

还有两个简单的回答提到了flexbox;然而，那是两年前的事了，他们没有提供任何例子。flexbox的规格现在已经确定下来了。

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.

注意:虽然CSS灵活的方框布局规范是在候选推荐阶段，但并不是所有的浏览器都实现了。WebKit实现必须以- WebKit -为前缀;Internet Explorer实现了规范的旧版本，前缀为-ms-;Opera 12.10实现了规范的最新版本，没有前缀。请参阅每个属性上的兼容性表，以获得最新的兼容性状态。

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

(来自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.

所有主要的浏览器和IE11+都支持Flexbox。对于ie10或以上版本，您可以使用柔性衬垫。

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

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

Working example

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.

使用flexbox，你可以轻松地在你的任何行或列之间进行切换，这些行或列具有固定的维度、内容大小的维度或保留空间的维度。在我的示例中，我已经设置了标题以对其内容进行快照(如操作问题)，我已经添加了一个脚注来显示如何添加一个固定高度的区域，然后设置内容区域以填充其余的空间。

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>

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.

在上面的CSS中，flex属性缩短了flex-grow、flex-shrink和flex- based属性，以建立flex项目的灵活性。Mozilla对灵活的盒子模型有很好的介绍。

#2

There really isn't a sound, cross-browser way to do this in CSS. Assuming your layout has complexities, you need to use JavaScript to set the element's height. The essence of what you need to do is:

在CSS中确实没有一种声音的、跨浏览器的方式来实现这一点。假设布局很复杂，您需要使用JavaScript来设置元素的高度。你需要做的是:

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

Once you can get this value and set the element's height, you need to attach event handlers to both the window onload and onresize so that you can fire your resize function.

获得该值并设置元素的高度之后，需要将事件处理程序附加到窗口onload和onresize，以便启动resize函数。

Also, assuming your content could be larger than the viewport, you will need to set overflow-y to scroll.

另外，假设您的内容可能大于viewport，您需要设置overflowy来滚动。

#3

The original post is more than 3 years ago. I guess many people who come to this post like me are looking for an app-like layout solution, say a somehow fixed header, footer, and full height content taking up the rest screen. If so, this post may help, it works on IE7+, etc.

最初的帖子是3年前的。我猜很多像我一样来到这篇文章的人都在寻找一个类似应用程序的布局解决方案，比如一个固定的页眉、页脚和占据其余屏幕的全高度内容。如果是的话，这篇文章可能会有所帮助，它适用于IE7+等等。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

And here are some snippets from that post:

下面是这篇文章的一些片段:

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

#4

Instead of using tables in the markup, you could use CSS tables.

与其在标记中使用表，不如使用CSS表。

Markup

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevant) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 and FIDDLE2

FIDDLE1和FIDDLE2

Some advantages of this method are:

这种方法的一些优点是:

1) Less markup

1)更少的标记

2) Markup is more semantic than tables, because this is not tabular data.

2)标记比表更语义化，因为这不是表格数据。

3) Browser support is very good: IE8+, All modern browsers and mobile devices (caniuse)

3)浏览器支持非常好:IE8+，所有现代浏览器和移动设备(caniuse)

---

Just for completeness, here are the equivalent Html elements to css properties for the The CSS table model

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

#5

CSS only Approach (If height is known/fixed)

When you want the middle element to span across entire page vertically, you can use calc() which is introduced in CSS3.

当您希望中间元素垂直跨整个页面时，可以使用CSS3中引入的calc()。

Assuming we have a fixed height header and footer elements and we want the section tag to take entire available vertical height...

假设我们有一个固定的高度页眉和页脚元素，我们想让section标签占据整个垂直高度…

Demo

演示

Assumed markup

假设标记

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

So your CSS should be

所以你的CSS应该是

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

So here, what am doing is, adding up the height of elements and than deducting from 100% using calc() function.

这里，我要做的是，把元素的高度相加，然后用calc()函数从100%减去。

Just make sure that you use height: 100%; for the parent elements.

只要确保你使用的高度:100%;父元素。

#6

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

用途:高: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>

#7

It could be done purely by CSS using vh:

完全可以通过CSS使用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

和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

我检查了一下，它适用于所有主流浏览器:Chrome、IE和火狐

#8

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:

当内容过高时需要底部div滚动时，所有发布的解决方案都不起作用。这里有一个在这种情况下有效的解决方案:

HTML:

HTML:

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

CSS:

CSS:

.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;
}

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

原始来源:在CSS中处理溢出时填充容器的剩余高度

JSFiddle live preview

JSFiddle实时预览

#9

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.

我也一直在寻找答案。如果您足够幸运能够实现IE8和up，那么您可以使用display:table和相关的值，以获得包含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!

如果您更幸运，并且您的用户正在使用*浏览器(例如，如果这是您控制的计算机上的内部网应用程序，比如我的最新项目)，那么您可以在CSS3中使用新的灵活框布局!

#10

What worked for me (with a div within another div and I assume in all other circumstances) is to set the bottom padding to 100%. That is, add this to your css / stylesheet:

对我有用的(在另一个div中有一个div，在所有其他情况下我假设)是将底部填充设置为100%。也就是说，将它添加到css /样式表中:

padding-bottom: 100%;

#11

A simple solution, using flexbox:

一个简单的解决方案，使用flexbox:

<div>header</div>
<div class="content"></div>

---

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

Codepen sample

Codepen样本

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

另一种解决方案，以内容div为中心

#12

CSS3 Simple Way

CSS3的简单方法

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.

现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

#13

How about you simply use vh which stands for view height in CSS...

你可以使用vh来表示CSS中的视图高度。

Look at the code snippet I created for you below and run it:

查看我为您创建的代码片段并运行它:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Also, look at the image below which I created for you:

另外，看看下面我为你创建的图片:

#14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

In all sane browsers, you can put the "header" div before the content, as a sibling, and the same CSS will work. However, IE7- does not interpret the height correctly if the float is 100% in that case, so the header needs to be IN the content, as above. The overflow: auto will cause double scroll bars on IE (which always has the viewport scrollbar visible, but disabled), but without it, the content will clip if it overflows.

在所有正常的浏览器中，您可以将“header”div放在内容之前，作为一个兄弟元素，同样的CSS也可以工作。但是，如果浮点数为100%，那么IE7就不能正确地解释高度，因此标题必须在内容中，如上面所示。溢出:auto将导致IE上的双滚动条(它总是让viewport scrollbar可见，但禁用)，但是如果没有它，内容将会被溢出。

#15

Disclaimer: The accepted answer gives the idea of the solution, but I'm finding it a bit bloated with an unnecessary wrapper and css rules. Below is a solution with very few css rules.

免责声明:公认的答案给出了解决方案的想法，但我发现它有点臃肿，包含了不必要的包装和css规则。下面是一个几乎没有css规则的解决方案。

HTML 5

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Solution above uses viewport units and flexbox, and is therefore IE10+, providing you use the old syntax for IE10.

上面的解决方案使用了viewport单元和flexbox，因此是IE10+，提供了对IE10的旧语法。

Codepen to play with: link to codepen

使用代码页:链接到代码页

Or this one, for those needing the main container to be scrollable in case of overflowing content: link to codepen

或者这个，对于那些需要主容器在内容溢出时可滚动的人:链接到代码页

#16

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.

如果您可以处理不支持旧浏览器(即MSIE 9或更老的浏览器)的问题，那么可以使用灵活的Box布局模块(该模块已经是W3C CR)来解决这个问题。

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.

不幸的是，MSIE 9或less不支持这一点，除了Firefox外，您必须为每个浏览器使用CSS属性的供应商前缀。希望其他供应商也尽快放弃前缀。

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.

另一种选择是CSS Grid布局，但稳定版本的浏览器对这种布局的支持更少。实际上，只有MSIE 10支持这一点。

#17

I wresteled with this for a while and ended up with the following:

我想了一会儿，最后得出了以下结论:

Since it is easy to make the content DIV the same height as the parent but apparently difficult to make it the parent height minus the header height I decided to make content div full height but position it absolutely in the top left corner and then define a padding for the top which has the height of the header. This way the content displays neatly under the header and fills the whole remaining space:

因为它很容易犯同样内容DIV高度作为父但显然难以让它父高度减去头高度我决定做内容DIV全高度但绝对位置在左上角,然后定义一个填充的*头的高度。这样，内容就会整齐地显示在标题下，并填满整个剩余的空间:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

#18

Why not just like this?

为什么不像这样?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Giving you html and body (in that order) a height and then just give your elements a height?

给你html和主体(按这个顺序)一个高度，然后给你的元素一个高度?

Works for me

适合我

#19

You can actually use display: table to split the area into two elements (header and content), where the header can vary in height and the content fills the remaining space. This works with the whole page, as well as when the area is simply the content of another element positioned with position set to relative, absolute or fixed. It will work as long as the parent element has a non-zero height.

实际上，您可以使用display: table将区域分割为两个元素(header和content)，其中header的高度可能有所不同，而内容将填充其余的空间。这适用于整个页面，也适用于区域仅仅是位置设置为相对、绝对或固定的另一个元素的内容。只要父元素的高度不为零，它就可以工作。

See this fiddle and also the code below:

看看这个小提琴和下面的代码:

CSS:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

#20

There's a ton of answers now, but I found using height: 100vh; to work on the div element that needs to fill up the entire vertical space available.

现在有很多答案，但我发现用高度:100vh;要处理需要填充整个垂直空间的div元素。

In this way, I do not need to play around with display or positioning. This came in handy when using Bootstrap to make a dashboard wherein I had a sidebar and a main. I wanted the main to stretch and fill the entire vertical space so that I could apply a background colour.

这样，我就不需要到处玩显示或定位了。这在使用Bootstrap制作仪表板(其中有一个侧栏和一个主栏)时非常有用。我想让主轴拉伸并填充整个垂直空间，这样我就可以应用背景颜色。

div {
    height: 100vh;
}

Supports IE9 and up: click to see the link

支持IE9和up:点击查看链接

#21

Vincent, I'll answer again using your new requirements. Since you don't care about the content being hidden if it's too long, you don't need to float the header. Just put overflow hidden on the html and body tags, and set #content height to 100%. The content will always be longer than the viewport by the height of the header, but it'll be hidden and won't cause scrollbars.

文森特，我会再次回答你的新要求。因为如果内容太长，您不关心隐藏的内容，所以不需要浮动标题。只需要在html和body标签上隐藏溢出，并将#content height设置为100%。根据标题的高度，内容总是比viewport长，但是它是隐藏的，不会引起滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

#22

CSS Grid Solution

CSS网格解决方案

Just defining the body with display:grid and the grid-template-rows using auto and the fr value property.

只需使用display:grid和使用auto和fr值属性的网格模板行定义主体。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

A Complete Guide to Grids @ CSS-Tricks.com

一个完整的网格指南@ css -老爸

#23

I found a quite simple solution, because for me it was just a design issue. I wanted the rest of the Page not to be white below the red footer. So i set the pages background color to red. And the contents backgroundcolor to white. With the contents height set to eg. 20em or 50% an almost empty page won't leave the whole page red.

我找到了一个非常简单的解决方案，因为对我来说，这只是一个设计问题。我想让页面的其余部分不要白到红页脚下面。因此我将页面的背景颜色设置为红色。内容以背景色为白色。内容高度设置为eg。一个几乎空着的页面不会让整个页面变成红色。

#24

Try this

试试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

#25

 style="height:100vh"

solved the problem for me. In my case I applied this to the required div

帮我解决了这个问题。在我的案例中，我将此应用于所需的div

#26

For mobile app i use only VH and VW

对于移动应用，我只使用VH和VW。

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

演示——https://jsfiddle.net/u763ck92/

#27

I had the same problem but I could not make work the solution with flexboxes above. So I created my own template, that includes:

我也有同样的问题，但是我不能用上面的flexboxes解决。所以我创建了自己的模板，包括:

• a header with a fixed size element
• 具有固定大小元素的标题
• a footer
• 一个页脚
• a side bar with a scrollbar that occupies the remaining height
• 一种侧条，其滚动条占据其余的高度
• content
• 内容

I used flexboxes but in a more simple way, using only properties display: flex and flex-direction: row|column:

我使用了flexboxes，但使用的方式更简单，只使用显示属性:flex和flex-direction:行|列:

I do use angular and I want my component sizes to be 100% of their parent element.

我使用了角，我希望我的分量大小是它们父元素的100%

The key is to set the size (in percents) for all parents inorder to limit their size. In the following example myapp height has 100% of the viewport.

关键是为所有父母设置大小(单位)，以限制他们的大小。在下面的示例中，myapp height拥有100%的viewport。

The main component has 90% of the viewport, because header and footer have 5%.

主组件有90%的viewport，因为页眉和页脚有5%。

I posted my template here: https://jsfiddle.net/abreneliere/mrjh6y2e/3

我在这里发布了我的模板:https://jsfiddle.net/abrenere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

#28

It's dynamic calc the remining screen space, better using Javascript.

它是动态的calc，提醒屏幕空间，使用Javascript更好。

You can use CSS-IN-JS technology, like below lib:

可以使用cssin - js技术，如下库所示:

https://github.com/cssobj/cssobj

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

演示:https://cssobj.github.io/cssobj-demo/

#29

Spinning off the idea of Mr. Alien...

脱离了外星人的想法……

This seems a cleaner solution than the popular flex box one for CSS3 enabled browsers.

对于支持CSS3的浏览器来说，这似乎是一个比流行的flex box更干净的解决方案。

Simply use min-height(instead of height) with calc() to the content block.

只需在内容块中使用带calc()的min-height(而不是height)。

The calc() starts with 100% and subtracts heights of headers and footers (need to include padding values)

calc()以100%开头，减去页眉和页脚的高度(需要包含填充值)

Using "min-height" instead of "height" is particularly useful so it can work with javascript rendered content and JS frameworks like Angular2. Otherwise, the calculation will not push the footer to the bottom of the page once the javascript rendered content is visible.

使用“min-height”而不是“height”是非常有用的，因此可以使用javascript呈现的内容和Angular2等JS框架。否则，当javascript呈现的内容可见时，计算不会将页脚推到页面底部。

Here is a simple example of a header and footer using 50px height and 20px padding for both.

下面是一个使用50px高度和20px填充的页眉和页脚的简单示例。

Html:

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Of course, the math can be simplified but you get the idea...

当然，数学可以简化，但你懂的……

#30

it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the very first answer. I am using that approach to rescale the <div> with the Google Maps.

对于我来说，它从来没有像NICCAI在第一个答案中提到的那样，在使用JavaScript时起过其他的作用。我正在使用这种方法来使用谷歌映射重新缩放

。

Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):

这里有一个完整的例子(在Safari/FireFox/IE/iPhone/Andorid中工作):

CSS

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>