使一个 div 填充剩余屏幕空间的高度
Posted
技术标签:
【中文标题】使一个 div 填充剩余屏幕空间的高度【英文标题】：Make a div fill the height of the remaining screen space 【发布时间】：2010-09-10 13:11:56 【问题描述】：我正在开发一个 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% 的屏幕空间。到目前为止，将整个内容包装在一个表格中是唯一可行的方法。
【问题讨论】：
对于以后在这里磕磕绊绊的人，您可以在大多数浏览器中获得所需的表格布局，无需表格标记，通过使用display:table 和相关属性，请参阅this answer 非常类似的问题。
我已尝试重新创建您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？
@Mr.外星人的回答简单实用，看看http://***.com/a/23323175/188784
其实你的描述是行不通的，即使是表格：如果内容占用的垂直空间大于屏幕高度，表格单元格和整个表格将扩展超出屏幕底部。您的内容溢出：自动不会出现滚动条。
@GillBates 它会在你指定父元素的高度后工作看jsfiddle.net/ceELs/5
【参考方案1】：
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 shim。
要查看当前支持，您还可以在此处查看： http://caniuse.com/#feat=flexbox
工作示例
使用 flexbox，您可以轻松地在具有固定尺寸、内容尺寸尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将页眉设置为对齐其内容（根据 OPs 问题），我添加了一个页脚以显示如何添加固定高度的区域，然后设置内容区域以填充剩余空间。
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 中，flex 属性简写了flex-grow、flex-shrink 和flex-basis 属性，以建立弹性项目的灵活性。 Mozilla 有一个good introduction to the flexible boxes model。
【讨论】：
为什么flex: 0 1 30px; 中的 flex: 0 1 30px; 属性在每个 div 中都会被覆盖？
这是浏览器对 flexbox 的支持 - 很高兴看到所有绿色 - caniuse.com/#feat=flexbox
绝对是一个非常好的方法，几乎可以工作；）当 div.content 的内容超过原始的 flex-ed 高度时，会出现一个小问题。在当前的实现中，“页脚”将被推低，这不是开发人员所期望的；）所以我做了一个非常简单的修复。 jsfiddle.net/przemcio/xLhLuzf9/3 我在容器和溢出滚动上添加了额外的 flex。
具有透明度的导航栏不起作用。 rgba 中的 alpha 通道完全没有效果，固定的页眉/页脚只能有纯色背景。【参考方案2】：
在 CSS 中确实没有一种可靠的跨浏览器方式来执行此操作。假设您的布局很复杂，您需要使用 javascript 来设置元素的高度。你需要做的实质是：
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦您可以获取此值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize 以便您可以触发调整大小函数。
另外，假设你的内容可能比视口大，你需要设置overflow-y来滚动。
【讨论】：
这就是我的怀疑。但是，该应用程序也可以在关闭 Javascript 的情况下运行，所以我想我会继续使用该表格。 文森特，站稳脚跟。我一直想做同样的事情，但用 css 似乎不可能？我不确定，但不管其他大量解决方案都没有按照您的描述进行。 javascript 是目前唯一可以正常工作的。【参考方案3】：原来的帖子是 3 年前的。我想很多像我一样来看这篇文章的人都在寻找类似应用程序的布局解决方案，比如说以某种方式固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它适用于 IE7+ 等。
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
以下是该帖子中的一些 sn-ps：
@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】：您可以使用 CSS 表格，而不是在标记中使用表格。
标记
<body>
<div>hello </div>
<div>there</div>
</body>
（相关）CSS
body
display:table;
width:100%;
div
display:table-row;
div+ div
height:100%;
FIDDLE1 和 FIDDLE2
这种方法的一些优点是：
1) 更少的标记
2) 标记比表格更具语义，因为这不是表格数据。
3) 浏览器支持非常好：IE8+，所有现代浏览器和移动设备 (caniuse)
为了完整起见，这里是与The CSS table model 的 css 属性等效的 Html 元素
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 方法（如果高度已知/固定）
当您希望中间元素垂直跨越整个页面时，您可以使用 CSS3 中引入的calc()。
假设我们有一个 固定高度 header 和 footer 元素，我们希望 section 标签占据整个可用的垂直高度...
Demo
假定标记和你的 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;
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>所以在这里，我正在做的是，将元素的高度相加，而不是使用 calc() 函数从 100% 中扣除。
只要确保您对父元素使用height: 100%;。
【讨论】：
OP 说标题可以是任意高度。因此，如果您事先不知道高度，您将无法使用 calc :(【参考方案6】：使用：
height: calc(100vh - 110px);
代码：
.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】：一个简单的解决方案，使用 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
【讨论】：
【参考方案8】：你在 CSS 中使用vh 代表view height 怎么样...
看看下面我为你创建的代码sn-p并运行它：
body
padding: 0;
margin: 0;
.full-height
width: 100px;
height: 100vh;
background: red;
<div class="full-height">
</div>另外，看看下面我为你创建的图片：
【讨论】：
只有当你想让一个 div 跨越窗口的整个高度时才好。现在在其上方放置一个高度未知的标题 div。【参考方案9】：CSS3 简单方法
height: calc(100% - 10px); // 10px is height of your first div...
现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。
【讨论】：
【参考方案10】：当您需要在内容太高时滚动底部 div 时，发布的解决方案都不起作用。以下是适用于这种情况的解决方案：
.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
【讨论】：
天哪！我一直在寻找这个答案这么久！太感谢了。 Flexbox 在这里不起作用，但 table-cells 确实如此。太棒了。【参考方案11】：这完全可以由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;
还有HTML
<div id="page">
<div id="tdcontent"></div>
<div id="content"></div>
</div>
我查了一下，它适用于所有主流浏览器：Chrome、IE 和 FireFox
【讨论】：
【参考方案12】：免责声明：接受的答案给出了解决方案的想法，但我发现它带有不必要的包装器和 css 规则有点臃肿。下面是一个css规则很少的解决方案。
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
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 */
上述解决方案使用 viewport units 和 flexbox，因此是 IE10+，前提是您使用 IE10 的旧语法。
可使用的 Codepen：link to codepen
或者这个，对于那些需要在内容溢出时滚动主容器的人：link to codepen
【讨论】：
主高度：10px;弹性：1；溢出：自动【参考方案13】：我也一直在寻找这个问题的答案。如果你有幸能够针对 IE8 及以上版本，可以使用display:table 和相关值来获取包含 div 在内的块级元素的表格的呈现规则。
如果您更幸运，并且您的用户使用***浏览器（例如，如果这是您控制的计算机上的 Intranet 应用程序，就像我的最新项目一样），您可以使用 CSS3 中的新 Flexible Box Layout！
【讨论】：
【参考方案14】：对我有用的（在另一个 div 中使用 div，我假设在所有其他情况下）是将底部填充设置为 100%。也就是说，将其添加到您的 css / 样式表中：
padding-bottom: 100%;
【讨论】：
100% 什么？如果我尝试这个，我会得到一个巨大的空白空间并开始滚动。【参考方案15】：现在有很多答案，但我发现使用 height: 100vh; 处理需要填满整个可用垂直空间的 div 元素。
这样，我就不需要玩弄显示或定位了。这在使用 Bootstrap 制作仪表板时派上了用场，其中我有一个侧边栏和一个主栏。我希望 main 拉伸并填充整个垂直空间，以便我可以应用背景颜色。
div
height: 100vh;
支持 IE9 及以上版本：click to see the link
【讨论】：
但是 100vh 听起来像是所有的高度，而不是剩余的高度。如果你有一个标题，然后你想填充其余部分怎么办【参考方案16】：<!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>
在所有正常的浏览器中，您可以将“标题”div 放在内容之前，作为同级，相同的 CSS 将起作用。但是，如果在这种情况下浮动为 100%，则 IE7- 不会正确解释高度，因此标题需要在内容中，如上所述。 overflow: auto 会在 IE 上造成双滚动条（它总是让视口滚动条可见，但禁用），但没有它，如果溢出，内容将被剪辑。
【讨论】：
【参考方案17】：如果您可以处理不支持旧浏览器（即 MSIE 9 或更早版本）的问题，您可以使用已经是 W3C CR 的Flexible Box Layout Module 来解决此问题。该模块还允许使用其他不错的技巧，例如重新排序内容。
很遗憾，MSIE 9 或更低版本不支持此功能，您必须为除 Firefox 之外的所有浏览器的 CSS 属性使用供应商前缀。希望其他供应商也尽快放弃该前缀。
另一个选择是CSS Grid Layout，但稳定版本的浏览器对它的支持更少。实际上，只有 MSIE 10 支持这一点。
2020 年更新：所有现代浏览器都支持display: flex 和display: grid。唯一缺少的是对 subgrid 的支持，它仅受 Firefox 支持。请注意，规范不支持 MSIE，但如果您愿意添加特定于 MSIE 的 CSS hack，则可以使其正常运行。我建议直接忽略 MSIE，因为即使微软也表示不应该再使用它。 Microsoft Edge 很好地支持这些功能（除了子网格支持，因为它与 Chrome 共享 Blink 渲染引擎）。
使用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>使用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>【讨论】：
你能添加一个使用 flexbox/grid 的例子吗？ 我添加了使用grid 和flex 的示例。请注意，如果足以满足您的需求，display:flex 通常更易于使用。 display:grid 的好处在于您可以使用逻辑网格区域名称并仅更改 grid 属性以根据需要切换布局，而无需重新排序元素顺序。请注意，Chrome 不支持subgrid，如果您想要嵌套布局，这会使事情变得容易得多。您应该根据可访问性需求对元素进行排序，而不是根据视觉顺序。
请注意，您可以在父元素中使用align-items 或align-content 而不是align-self。如果内容包装，它们之间的区别与包装的项目有关。【参考方案18】：
CSS Grid Solution
只需使用display:grid 定义body，使用auto 和fr 值属性定义grid-template-rows。
*
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
【讨论】：
是的。它现在得到了广泛的支持，因此没有理由以另一种方式来做【参考方案19】：在引导中：
CSS 样式：
html, body
height: 100%;
1) 只填满剩余屏幕空间的高度：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div>Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
2) 填充剩余屏幕空间的高度并将内容对齐到父元素的中间：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
【讨论】：
【参考方案20】：我为此挣扎了一段时间，结果如下：
由于很容易使内容 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%;
【讨论】：
不知道表头高度怎么办？【参考方案21】：为什么不这样呢？
html, body
height: 100%;
#containerInput
background-image: url('../img/edit_bg.jpg');
height: 40%;
#containerControl
background-image: url('../img/control_bg.jpg');
height: 60%;
给你 html 和 body（按这个顺序）一个高度，然后只给你的元素一个高度？
为我工作
【讨论】：
【参考方案22】：这是我自己的 Pebbl 解决方案的最小版本。花了很长时间才找到让它在 IE11 中工作的技巧。 （也在 Chrome、Firefox、Edge 和 Safari 中进行了测试。）
html
height: 100%;
body
height: 100%;
margin: 0;
section
display: flex;
flex-direction: column;
height: 100%;
div:first-child
background: gold;
div:last-child
background: plum;
flex-grow: 1;
<body>
<section>
<div>FIT</div>
<div>GROW</div>
</section>
</body>【讨论】：
【参考方案23】： style="height:100vh"
为我解决了这个问题。就我而言，我将此应用于所需的 div
【讨论】：
【参考方案24】：您实际上可以使用display: table 将区域拆分为两个元素（标题和内容），其中标题的高度可以不同，而内容会填充剩余空间。这适用于整个页面，以及当区域只是另一个元素的内容时，position 设置为 relative、absolute 或 fixed。只要父元素的高度不为零，它就可以工作。
See this fiddle 以及下面的代码：
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：
<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>
【讨论】：
【参考方案25】：文森特，我会用你的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此您不需要浮动标题。只需将溢出隐藏在 html 和 body 标签上，并将#content 高度设置为 100%。内容将始终比视口长标题的高度，但它会被隐藏并且不会导致滚动条。
<!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>
【讨论】：
【参考方案26】：试试这个
var sizeFooter = function()
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
$(window).resize(sizeFooter);
【讨论】：
【参考方案27】：我遇到了同样的问题，但我无法使用上面的 flexbox 解决方案。所以我创建了自己的模板，其中包括：
具有固定大小元素的标题 页脚 带有滚动条的侧边栏占据剩余高度 内容我使用了弹性盒，但方式更简单，只使用属性 display: flex 和 flex-direction: row|column:
我确实使用了 angular，并且我希望我的组件大小是其父元素的 100%。
关键是为所有父母设置大小（以百分比为单位），以限制他们的大小。在以下示例中，myapp 高度具有 100% 的视口。
主要组件占视口的 90%，因为页眉和页脚占 5%。
我在这里发布了我的模板：https://jsfiddle.net/abreneliere/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：
<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】：对于移动应用，我只使用 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;
演示 - https://jsfiddle.net/u763ck92/
【讨论】：
【参考方案29】：我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。 我希望页面的其余部分在红色页脚下方不是白色的。 所以我将页面背景颜色设置为红色。并且内容背景颜色为白色。 内容高度设置为例如。 20em 或 50% 几乎是空的页面不会使整个页面变红。
【讨论】：
【参考方案30】：衍生出异形先生的想法……
这似乎比流行的用于支持 CSS3 的浏览器的弹性框更简洁。
只需将 min-height（而不是 height）与 calc() 一起用于内容块。
calc() 从 100% 开始，减去页眉和页脚的高度（需要包括填充值）
使用“min-height”而不是“height”特别有用，因此它可以与 javascript 呈现的内容和 Angular2 等 JS 框架一起使用。否则，一旦 javascript 呈现的内容可见，计算将不会将页脚推到页面底部。
这是一个使用 50 像素高度和 20 像素内边距的页眉和页脚的简单示例。
HTML：
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS：
.content
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
当然，数学可以简化，但你明白了......
【讨论】：
以上是关于使一个 div 填充剩余屏幕空间的高度的主要内容，如果未能解决你的问题，请参考以下文章