让 div 填充剩余屏幕空间的高度
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在开发一个网络应用程序，我希望内容填充整个屏幕的高度。
该页面有一个标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容 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 高度也会设置为百分比。所以 100% 的东西在里面 div 将其填充到底部。两个元素也将占 50%。
更新2：
例如，如果标题占据屏幕高度的 20%，则内部指定为 50% 的表格 #content 将占用 40% 的屏幕空间。到目前为止，将整个内容包装在表格中是唯一有效的方法。
解决方案
2015年更新：弹性盒方法
还有另外两个答案简要提到 弹性盒;然而，那是两年多前的事了，他们没有提供任何例子。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，您可以轻松地在具有固定尺寸、内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将标题设置为与其内容对齐（根据 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 中， 柔性 财产简写 弹性增长, 弯曲收缩, ， 和 弹性基础 属性来建立弹性项目的灵活性。Mozilla 有一个 灵活盒子模型的良好介绍.
其他提示
在 CSS 中确实没有一种健全的、跨浏览器的方法来做到这一点。假设您的布局很复杂，您需要使用 JavaScript 来设置元素的高度。您需要做的本质是：
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦获得该值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize，以便可以触发调整大小函数。
另外，假设您的内容可能大于视口，您将需要设置 Overflow-y 来滚动。
原来的帖子是3年多前的了。我想很多像我一样看到这篇文章的人正在寻找一个类似应用程序的布局解决方案，比如说一个固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它适用于 IE7+ 等。
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
以下是该帖子的一些片段：
@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>您可以使用 CSS 表格，而不是在标记中使用表格。
标记
<body>
<div>hello </div>
<div>there</div>
</body>
（相关）CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
这种方法的一些优点是：
1）更少的标记
2）标记比表格更具语义性，因为这不是表格数据。
3）浏览器支持是 非常好: ：IE8+，所有现代浏览器和移动设备（我可以用吗)
为了完整起见，以下是与 css 属性等效的 Html 元素 CSS表格模型
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 方法（如果高度已知/固定）
当您希望中间元素垂直跨越整个页面时，可以使用 calc() 这是CSS3中引入的。
假设我们有一个 固定高度 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;
}
所以在这里，我所做的是，将元素的高度相加，然后减去 100% 使用 calc() 功能。
只需确保您使用 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>你简单地使用怎么样 vh 这代表 view height 在 CSS...
看着那（这 代码片段 我在下面为您创建并运行它：
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>另外，请看下面我为您创建的图片：
CSS3 简单方法
height: calc(100% - 10px); // 10px is height of your first div...
如今所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。
这可以纯粹通过 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
一个简单的解决方案，使用 Flexbox：
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>当内容太高时需要底部 div 滚动时，发布的解决方案都不起作用。这是在这种情况下有效的解决方案：
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;
}
我也一直在寻找这个问题的答案。如果您足够幸运能够以 IE8 及更高版本为目标，则可以使用 display:table 和相关值来获取包含div在内的块级元素的表格的渲染规则。
如果您更幸运并且您的用户正在使用顶级浏览器（例如，如果这是您控制的计算机上的 Intranet 应用程序，就像我的最新项目一样），您可以使用新的 灵活的盒子布局 在 CSS3 中！
对我有用的（一个 div 位于另一个 div 中，我假设在所有其他情况下）是将底部填充设置为 100%。也就是说，将其添加到您的 css / 样式表中：
padding-bottom: 100%;
免责声明：接受的答案给出了解决方案的想法，但我发现它有点臃肿，有不必要的包装器和 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 */
}
上述解决方案使用 视口单位 和 弹性盒, ，因此是 IE10+，前提是您使用 IE10 的旧语法。
可以使用的Codepen： 链接到代码笔
或者这个，对于那些需要主容器在内容溢出时可滚动的人： 链接到代码笔
<!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- 无法正确解释高度，因此标头需要位于内容中，如上所述。溢出：auto 会在 IE 上导致双滚动条（它始终使视口滚动条可见，但被禁用），但如果没有它，内容如果溢出就会被剪辑。
现在有很多答案，但我发现使用 height: 100vh; 处理需要填充整个可用垂直空间的 div 元素。
这样，我就不需要摆弄显示或定位了。当使用 Bootstrap 制作一个仪表板时，这非常有用，其中我有一个侧边栏和一个主栏。我希望主体能够拉伸并填充整个垂直空间，以便我可以应用背景颜色。
div {
height: 100vh;
}
支持IE9及以上版本： 点击查看链接
我为此苦苦思索了一段时间，最终得出以下结论：
由于很容易使内容 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%;
}
为什么不就这样呢？
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 （按这个顺序）一个高度，然后只给你的元素一个高度？
对我有用
style="height:100vh"
为我解决了问题。就我而言，我将其应用于所需的 div
只需定义 body 和 display:grid 和 grid-template-rows 使用 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>你实际上可以使用 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>
文森特，我将根据您的新要求再次回答。由于您不关心内容太长而被隐藏，因此不需要浮动标题。只需将溢出隐藏在 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>
尝试这个
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。我希望页面的其余部分在红色页脚下方不要呈白色。所以我将页面背景颜色设置为红色。并将内容背景颜色设置为白色。将内容高度设置为例如。20em 或 50% 几乎空白的页面不会让整个页面变成红色。
对于移动应用程序，我仅使用 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;
}
我遇到了同样的问题，但我无法使用上面的弹性盒解决方案。所以我创建了自己的模板，其中包括：
- 具有固定大小元素的标头
- 页脚
- 带有滚动条的侧栏占据剩余高度
- 内容
我使用了弹性盒，但以更简单的方式，仅使用属性 展示：柔性 和 弯曲方向：行|列:
我确实使用 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;
}
网页：
<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>
打消了先生的想法。外星人...
对于支持 CSS3 的浏览器来说，这似乎是一种比流行的 Flex Box 更简洁的解决方案。
只需将 min-height（而不是 height）与 calc() 一起使用到内容块即可。
calc() 从 100% 开始，减去页眉和页脚的高度（需要包括填充值）
使用“min-height”而不是“height”特别有用，因此它可以与 javascript 渲染内容和 Angular2 等 JS 框架一起使用。否则，一旦 javascript 渲染的内容可见，计算将不会将页脚推到页面底部。
这是一个简单的页眉和页脚示例，高度为 50 像素，填充为 20 像素。
网页：
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS：
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
当然，数学可以简化，但你明白了......
它 从来没有以其他方式为我工作过，然后使用 JavaScript 正如 NICCAI 在第一个答案中所建议的那样。我正在使用这种方法来重新调整 <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;
超文本标记语言
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
