css - div如何填充屏幕空间剩余高度

  显示原文与译文双语对照的内容

我目前正在使用一个web应用程序,我想让内容填充整个屏幕的高度。

页面有一个标题,它包含一个 logo 和账户信息。 这可能是任意高度。 我要内容div将页面的其余部分填充到底部。

我有一个标题 div 和一个内容 div 。 现在,我正在使用一个表格,比如:

css:


#page {
 height: 100%; width: 100%
}
#tdcontent {
 height: 100%;
}
#content {
 overflow: auto;/* or overflow: hidden; */
}

html :


<table id="page">
 <tr><td id="tdheader">
 <div id="header">...</div>
 </td></tr>
 <tr><td id="tdcontent">
 <div id="content">...</div>
 </td>
</table>

页面的整个高度被填满,不需要滚动。

对于内容div中的任何内容,设置 top: 0; 将把它放在标题下面。 有时内容将是一个真实的表格,它的高度设置为 100% 。 将 header 放入 content 将不允许这里操作。

是否可以在不使用 table的情况下实现相同的效果?

更新:

内容 div 中的元素也将高度设置为百分比。 所以在 100% div 内将填补底部。 50%处的两个元素相同。

更新2:

例如,如果头占用 20%高度的屏幕,一个表在 50%指定内部 #content 40%的屏幕空间。 到目前为止,将整个东西包装在一个表格中是唯一的事情。

时间:

在CSS中确实没有声音,跨浏览器 方法。 假设布局有复杂性,你需要使用JavaScript来设置元素的高度。 你需要做的实质是:


Element Height = Viewport height - element.offset.top - desired bottom margin

一旦你可以获得这个值并设置元素的高度,你需要将事件处理程序附加到窗口onload和 onresize,这样你就可以激发你的resize函数。

同时,假设你的内容可能大于 viewport,你需要设置overflow-y来滚动。

你可以使用 css tables,而不是在标记中使用表。

标记


<body> 
 <div>hello </div>
 <div>there</div>
</body>

( 相关) CSS


body
{
 display:table;
 width:100%;
}
div
{
 display:table-row;
}
div+ div
{
 height:100%; 
}

FIDDLE1FIDDLE2

这里方法的一些优点是:

1 ) LESS 标记

2 ) 标记比表更语义,因为这不是表数据。

3 ) 浏览器支持的非常好: IE8+,所有现代浏览器和移动设备( caniuse )


为了完整性,这是等价的html元素的css属性 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方法

当你想让中间元素垂直横跨整个页面时,你可以使用在CSS3中引入的calc()

Assuming we have a fixed height header and footer elements and we want section tag to take - available vertical height...

演示

假定的标记标记为


<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%;

( 在另一个div中,我假设在其他情况下)的工作是将底层填充设置为 100% 。 即,将它添加到你的css/样式表中:


padding-bottom: 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;
 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会工作。 然而,IE7-并不正确解释身高如果浮动 100%在这种情况下,所以头需要在内容如上所述。 溢出:自动将导致 IE ( 总是显示viewport滚动条,但禁用) 上的双滚动条,但如果没有它,内容会在溢出时剪辑。

为什么不像这样?


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和身体( 按照那个顺序) 一个高度,然后给你的元素一个高度?

为我工作

我使用了一段时间,最终得到了以下结果:

因为它很容易犯同样内容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%;
}

...