如何实现让两个div填满整个网页，其中一个div的高度是固定的，另一个div的高度随浏览器的变换而变换
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现让两个div填满整个网页，其中一个div的高度是固定的，另一个div的高度随浏览器的变换而变换相关的知识，希望对你有一定的参考价值。
两个div始终占满整个浏览器，宽度都是100%
参考技术A <div style="height:300px；width:100px;"><div style="height:50px;width:100%; "></div>
<div style="height:100%;width:100%; margin-top:-50px;padding-top:50px;"</div>
</div>
今天我也遇到了这个问题，仔细想想，办法总比困难多。 参考技术B 100%还没占满整个网页吗？难道你没加*margin:0;padding;0;追问
100%是相对浏览器的100%，也就是说我下面那个如果写高度100%的话，那再加上上面那个div的100px 这样就是相当于这个网页的实际高度是全屏+100px了
参考技术C <div style="width:100%; height:100%"><div style="height:100px;"></div>
</div> 参考技术D <div 高=100%>
<div 高=100>内容</div>
内容:padding-top:100px
</div>本回答被提问者和网友采纳 第5个回答 2012-08-28 这个要设置浮动追问
不是，是一个div在上面，一个div在下面
追答这个有代码吗？看看~~~
追问这个就随便写呀，我需要的是这种效果
aa是固定高度的， 让“bb”自动填满浏览器剩下的部分
再用一个div把这两个div给包含在内，然后设置大的div和里面那两个div的高度和宽度看看
让一个 div 填充剩余屏幕空间的高度
【中文标题】让一个 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】：
如果您可以处理不支持旧浏览器（即 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。如果内容包装，它们之间的区别与包装的项目有关。【参考方案2】：
我的一些组件是动态加载的，这导致我无法设置导航栏的高度。
我所做的是使用the ResizeObserver API。
function observeMainResize()
const resizeObserver = new ResizeObserver(entries =>
for (let entry of entries)
$("nav").height(Math.max($("main").height(),
$("nav") .height()));
);
resizeObserver.observe(document.querySelector('main'));
然后：
...
<body onload="observeMainResize()">
<nav>...</nav>
<main>...</main>
...
【讨论】：
【参考方案3】：对于移动应用，我只使用 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/
【讨论】：
【参考方案4】：在引导中：
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>
【讨论】：
【参考方案5】：如果你使用 display: flex 在父 div 上你所要做的就是简单地将高度设置为拉伸或填充
.divName
height: stretch
【讨论】：
【参考方案6】：这是一个使用网格的答案。
.the-container-div
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto min-content;
height: 100vh;
.view-to-remain-small
grid-row: 2;
.view-to-be-stretched
grid-row: 1
【讨论】：
【参考方案7】：这是我自己的 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>【讨论】：
【参考方案8】：使用CSS Grid的另一种解决方案
定义网格
.root
display: grid;
grid-template-rows: minmax(60px, auto) minmax(0, 100%);
第一行（标题）：可以设置最小高度，最大高度将取决于内容。 第二行（内容）将尝试填充标题后留下的可用空间。
这种方法的优点是内容可以独立于页眉滚动，所以页眉总是在页面的顶部
body, html
margin: 0;
height: 100%;
.root
display: grid;
grid-template-rows: minmax(60px, auto) minmax(0, 100%);
height: 100%;
.header
background-color: lightblue;
button
background-color: darkslateblue;
color: white;
padding: 10px 50px;
margin: 10px 30px;
border-radius: 15px;
border: none;
.content
background-color: antiquewhite;
overflow: auto;
.block
width: calc(100% - 20px);
height: 120px;
border: solid aquamarine;
margin: 10px;
<div class="root">
<div class="header">
<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
<button>click</button>
</div>
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="footer"></div>
</div>【讨论】：
【参考方案9】：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 通道完全没有效果，固定的页眉/页脚只能有纯色背景。【参考方案10】：
仅 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 :(【参考方案11】：当您需要在内容太高时滚动底部 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 确实如此。太棒了。【参考方案12】：这完全可以由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
【讨论】：
【参考方案13】：一个简单的解决方案，使用 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
【讨论】：
【参考方案14】：现在有很多答案，但我发现使用 height: 100vh; 处理需要填满整个可用垂直空间的 div 元素。
这样，我就不需要玩弄显示或定位了。这在使用 Bootstrap 制作仪表板时派上了用场，其中我有一个侧边栏和一个主栏。我希望 main 拉伸并填充整个垂直空间，以便我可以应用背景颜色。
div
height: 100vh;
支持 IE9 及以上版本：click to see the link
【讨论】：
但是 100vh 听起来像是所有的高度，而不是剩余的高度。如果你有一个标题，然后你想填充其余部分怎么办【参考方案15】：在 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。【参考方案16】： style="height:100vh"
为我解决了这个问题。就我而言，我将此应用于所需的 div
【讨论】：
【参考方案17】：CSS3 简单方法
height: calc(100% - 10px); // 10px is height of your first div...
现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。
【讨论】：
【参考方案18】：原来的帖子是 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>【讨论】：
这里只有一个问题：页眉和页脚不是自动调整大小的。 那是真正的困难，而那就是为什么“这不可能”的答案目前在顶部...【参考方案19】：我也一直在寻找这个问题的答案。如果你有幸能够针对 IE8 及以上版本，可以使用display:table 和相关值来获取包含 div 在内的块级元素的表格的呈现规则。
如果您更幸运，并且您的用户使用***浏览器（例如，如果这是您控制的计算机上的 Intranet 应用程序，就像我的最新项目一样），您可以使用 CSS3 中的新 Flexible Box Layout！
【讨论】：
【参考方案20】：衍生出异形先生的想法……
对于支持 CSS3 的浏览器，这似乎比流行的 flex box 更简洁。
只需将 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));
当然，数学可以简化，但你明白了......
【讨论】：
【参考方案21】：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
【讨论】：
是的。它现在得到了广泛的支持，所以没有理由换一种方式【参考方案22】：它是动态计算屏幕空间的，最好使用Javascript。
您可以使用 CSS-IN-JS 技术，如下库：
https://github.com/cssobj/cssobj
演示：https://cssobj.github.io/cssobj-demo/
【讨论】：
【参考方案23】：我遇到了同样的问题，但我无法使用上面的 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>
【讨论】：
【参考方案24】：使用：
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>【讨论】：
【参考方案25】：您可以使用 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
【讨论】：
【参考方案26】：它从来没有像 NICCAI 在第一个答案中建议的那样使用 JavaScript 以其他方式为我工作。我正在使用这种方法通过谷歌地图重新调整<div>。
这里是如何做到这一点的完整示例（适用于 Safari/FireFox/IE/iPhone/Andorid（适用于旋转））：
CSS
body
height: 100%;
margin: 0;
padding: 0;
.header
height: 100px;
background-color: red;
.content
height: 100%;
background-color: green;
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
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
【讨论】：
【参考方案27】：免责声明：接受的答案给出了解决方案的想法，但我发现它带有不必要的包装器和 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；溢出：自动【参考方案28】：文森特，我会用你的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此您不需要浮动标题。只需将溢出隐藏在 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>
【讨论】：
【参考方案29】：试试这个
var sizeFooter = function()
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
$(window).resize(sizeFooter);
【讨论】：
【参考方案30】：我为此挣扎了一段时间，结果如下：
由于很容易使内容 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%;
【讨论】：
不知道表头高度怎么办？以上是关于如何实现让两个div填满整个网页，其中一个div的高度是固定的，另一个div的高度随浏览器的变换而变换的主要内容，如果未能解决你的问题，请参考以下文章
如何让div填满整个屏幕（Masonry / Pinterest）布局