让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>
页面的整个高度被填满，不需要滚动。
对于content div内的任何内容，设置top: 0; 会把它放在标题的正下方。 有时候，内容将是一个真正的表格，其高度设置为100％。 将header放入content将不会允许这个工作。
有没有办法达到同样的效果，而不使用table ？
更新：
内容div元素也将高度设置为百分比。 所以div里100％的东西会填充到底部。 至于两个要素在50％。
更新2：
例如，如果标题占用了屏幕高度的20％，则在内容中指定为50％的表格将占用屏幕空间的40％。 到目前为止，把整个东西包装在一个表中是唯一有效的东西。
2015年更新：flexbox方法
还有另外两个简要提到flexbox的答案。 不过，这是两年多以前，并没有提供任何例子。 flexbox的规格现在已经确定。
注意：尽pipeCSS灵活框布局规范处于候选推荐阶段，但并非所有的浏览器都实现了它。 WebKit实现必须以-webkit-为前缀。 Internet Explorer实现旧版本的规范，前缀为-ms-; Opera 12.10实现了最新版本的规范，没有前缀。 请参阅每个属性上的兼容性表以了解最新的兼容性状态。
（取自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes ）
所有主stream浏览器和IE11 +均支持Flexbox。 对于IE 10或更高版本，您可以使用FlexieJS垫片。
要检查当前的支持，你也可以在这里看到： http : //caniuse.com/#feat=flexbox
工作示例
使用flexbox，您可以在具有固定尺寸，内容尺寸或剩余空间尺寸的任何行或列之间轻松切换。 在我的例子中，我已经设置了头部alignment其内容（按照OP的问题），我已经添加了一个页脚来显示如何添加一个固定高度的区域，然后设置内容区域来填充剩余的空间。
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中。 假设你的布局有复杂性，你需要使用JavaScript来设置元素的高度。 你需要做的事情的本质是：
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦你可以得到这个值并设置元素的高度，你需要将事件处理程序同时添加到窗口的onload和onresize，这样你可以触发你的resize函数。
另外，假设你的内容可能比视口大，你将需要设置overflow-y来滚动。
原来的职位是3年多以前。 我想很多像我这样来到这个职位的人正在寻找一个类似于应用程序的布局解决scheme，比如一个固定的页眉，页脚和全高的内容占用了其余的屏幕。 如果是这样，这个职位可能会帮助，它在IE7 +等工程。
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
下面是这个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"> <h2>My header</h2> </div> <div class="body row scroll-y"> <p>The body</p> </div> <div class="footer row"> My footer </div>
而不是在标记中使用表格，你可以使用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）较less的标记
2）标记比表更多的语义，因为这不是表格数据。
3）浏览器支持非常好 ：IE8 +，所有现代浏览器和移动设备（ caniuse ）
为了完整起见，这里是CSS表格模型的 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 }
只有CSS方法（如果高度已知/固定）
当你希望中间元素垂直跨越整个页面时，可以使用CSS3中引入的calc() 。
假设我们有一个固定的高度 header和footer元素，我们希望section标签采取整个可用的垂直高度…
演示
假设标记
<header>100px</header> <section>Expand me for remaining space</section> <footer>150px</footer>
所以你的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; }
所以在这里，所做的是，加上元素的高度，而不是用calc()函数从100%扣除。
只要确保你使用height: 100%; 为父元素。
使用： 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>
我一直在寻找这个答案。 如果你有幸能够瞄准IE8以上，你可以使用display：table和相关值来获取包含div的块级元素的表格的渲染规则。
如果你更幸运，并且你的用户正在使用顶级浏览器（例如，如果这是你控制的计算机上的内联网应用程序，就像我最近的项目一样），那么你可以在CSS3中使用新的灵活框布局 ！
对我来说（对于另外一个div中的div，我假设在其他所有情况下）是将底部填充设置为100％。 也就是说，添加到你的CSS /样式表：
padding-bottom: 100%;
当内容太高时，如果需要底部div滚动，则没有任何解决scheme可以正常工作。 这是一个在这种情况下工作的解决scheme：
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：
.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; }
原始来源：在CSS中处理溢出时填充容器的剩余高度
JSFiddle实时预览
它可以完全由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>
我检查了它，它适用于所有主stream浏览器： Chrome ， IE和FireFox
一个简单的解决scheme，使用flexbox：
<div>header</div> <div class="content"></div>
html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex-grow: 1; }
Codepen样品
另一种解决scheme，在内容div中居中
CSS3的方式
height: calc(100% - 10px); // 10px is height of your first div...
<!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-不能正确解释高度，所以标题需要在IN内容中，如上所述。 overflow：auto会在IE上产生双滚动条（总是有可视的滚动条可见，但是被禁用），但是如果没有它，内容将会被剪切，如果它溢出的话。
如果您可以处理不支持旧浏览器（即MSIE 9或更旧版本），则可以使用灵活框布局模块 （已经是W3C CR）执行此操作。 该模块还允许其他好的技巧，比如重新sorting内容。
不幸的是，MSIE 9或更低版本不支持这一点，你必须使用除了Firefox以外的其他浏览器的CSS属性的供应商前缀。 希望其他厂商也很快放弃这个前缀。
另一种select是CSS Grid Layout，但是浏览器稳定版本的支持更less。 实际上，只有MSIE 10支持这一点。
我沉吟了一会儿，最后得到了以下结果：
由于很容易使内容DIV与父级高度相同，但显然难以使父级高度减去标头高度，因此我决定将内容div设置为全高，但将其绝对定位在左上angular，然后定义填充顶部有顶部的高度。 这样，内容显示在标题下方，并填充整个剩余空间：
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%; }
为什么不是这样？
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和身体（按此顺序）一个高度，然后给你的元素高度？
为我工作
免责声明：接受的答案给出了解决scheme的想法，但我发现它有点臃肿与不必要的包装和CSS规则。 下面是一个很less有css规则的解决scheme。
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 */ }
上面的解决scheme使用视口单元和flexbox ，因此IE10 +使用IE10的旧语法。
与Codepen一起玩： 链接到codepen
或者这个，对于那些需要主容器在满溢的情况下可以滚动的情况： 链接到codepen
实际上，您可以使用display: table将区域拆分为两个元素（标题和内容），其中标题可以在高度上变化，并且内容填充剩余的空间。 这适用于整个页面，以及当区域只是position设置为relative ， absolute或fixed的另一个元素的内容。 只要父元素的高度不为零，它就会工作。
看到这个小提琴和下面的代码：
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>
现在有很多答案，但我发现使用高度：100vh; 在div元素上工作，需要填充整个可用的垂直空间。
这样，我不需要玩弄显示或定位。 当使用Bootstrap来制作一个仪表板，其中有一个侧边栏和一个主窗口时，这一点很方便。 我希望主要伸展和填充整个垂直空间，以便我可以应用背景颜色。
div { height: 100vh; }
支持IE9及以上版本： 点击查看链接
那么你只需使用vh代表view height …
看看我为你创build的代码片段，并运行它：
body { padding: 0; margin: 0; } .full-height { width: 100px; height: 100vh; background: red; }
<div class="full-height"> </div>
文森特，我会再次用你的新要求来回答。 由于您不关心被隐藏的内容太长，所以您不需要浮动标题。 只需将隐藏在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>
我发现了一个相当简单的解决scheme，因为对我来说这只是一个devise问题。 我希望页面的其余部分在红色页脚下方不要变成白色。 所以我把页面背景颜色设置为红色。 而内容backgroundcolor为白色。 将内容高度设置为例如 20em或50％几乎空的页面不会将整个页面留下红色。
尝试这个
var sizeFooter = function(){ $(".webfooter") .css("padding-bottom", "0px") .css("padding-bottom", $(window).height() - $("body").height()) } $(window).resize(sizeFooter);
它是dynamic计算提醒屏幕空间，更好地使用Javascript。
您可以使用CSS-IN-JS技术，如下所示：
https://github.com/cssobj/cssobj
DEMO： https ： //cssobj.github.io/cssobj-demo/
对于移动应用程序，我只使用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; }
抛开外星人的想法….
这似乎是一个比CSS3支持的浏览器更受欢迎的Flex框架。
简单地使用min-height（而不是height）和calc（）到内容块。
calc（）以100％开始并且减去页眉和页脚的高度（需要包括填充值）
使用“最小高度”而不是“高度”是特别有用的，因此它可以使用JavaScript呈现的内容和JS框架，如Angular2。 否则，一旦JavaScript呈现的内容可见，计算将不会将页脚推到页面的底部。
这是一个简单的例子，页眉和页脚使用50px高度和20px填充。
HTML：
<body> <header></header> <div class="content"></div> <footer></footer> </body>
CSS：
.content { min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px)); }
当然，math可以简化，但你明白了…
我有同样的问题，但我不能使用上面的flexboxes解决scheme。 所以我创build了自己的模板，其中包括：
- 具有固定大小的元素的头部
- 一个页脚
- 带有滚动条的侧栏占据了剩余的高度
- 内容
我使用了柔印盒，但使用更简单的方法，只使用属性显示：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>
CSS网格解决scheme
只需使用display:grid和grid-template-rows使用auto和fr value属性定义body 。
* { 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>
如果唯一的问题是高度，只使用div似乎工作：
<div id="header">header content</div> <div id="content" style="height:100%">content content</div>
在一个简单的testing中，标题/内容的宽度在你的例子和我的不同，但是我不确定你的post是否关注宽度？
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.
Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):
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>
