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

问题：

I am 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. 我希望内容div将页面的其余部分填充到底部。

I have a header div and a content div . 我有一个标题div和一个内容div 。 At the moment I am using a table for the layout like so: 目前，我正在使用表格进行布局，如下所示：

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; 对于内容div中的任何内容，请设置top: 0; will put it right underneath the header. 将其放在标题的正下方。 Sometimes the content will be a real table, with its height set to 100%. 有时，内容将是一个实际表，其高度设置为100％。 Putting header inside content will not allow this to work. 将header放在content中将使其无法使用。

Is there a way to achieve the same effect without using the table ? 有没有一种方法可以在不使用table情况下达到相同的效果？

Update: 更新：

Elements inside the content div will have heights set to percentages as well. content div元素的高度也将设置为百分比。 So something at 100% inside the div will fill it to the bottom. 因此， div内100％的内容将填充到底部。 As will two elements at 50%. 两个元素占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. 例如，如果标题占据了屏幕高度的20％，则在#content内指定为50％的表将占据屏幕空间的40％。 So far, wrapping the entire thing in a table is the only thing that works. 到目前为止，将整个内容包装在表中是唯一有效的方法。

---

解决方案：

参考一： https://stackoom.com/question/NSU/使div填充剩余屏幕空间的高度
参考二： https://oldbug.net/q/NSU/Make-a-div-fill-the-height-of-the-remaining-screen-space

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3215409