关于javascript：如何用css制作主要内容div填充屏幕高度

How to make the main content div fill height of screen with css

本问题已经有最佳答案，请猛点这里访问。

所以我有一个带有标题、主体和页脚的网页。我希望主体填充页面的100%(在页脚和页眉之间填充100%)。我的页脚是绝对位置，底端为0。每次我试图将主体设置为100%高度或更改位置或其他什么，它也会溢出头部。如果用top: 40将body设置为绝对位置(因为我的header是40px高)，它会向下移动40px太远，从而创建一个滚动条。

我创建了一个简单的HTML文件，因为我不能从实际项目中发布整个页面/css。对于示例代码，即使主内容主体填充了屏幕，它也会向下移动40px太远(我假定是由于头)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html, body{
margin: 0;
padding: 0;}

header{
height: 40px;
width: 100%;
background-color: blue;
}

#maincontent{
background-color: green;
height: 100%;
width: 100%;
}

footer{
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

有人知道答案吗？

相关讨论

不需要高度百分比
不需要jquery

(！)使用底部和顶部拉伸DIV：

1
2
3
4
5
6

.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}

检查我的代码：http://jsfiddle.net/aslancods/mw9wf/

相关讨论

无需javascript，无需绝对定位，无需固定高度。

这里有一个完全的CSS/CSS方法，不需要固定高度或绝对定位：

CSS

1
2
3
4
5
6
7
8
9
10

.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<header class="header">
<p>
This is the header
</p>
</header>
<section class="content">

<p>
This is the content.
</p>

</section>
<footer class="footer">
<p>
This is the footer.
</p>
</footer>

请参见此处的实际操作：http://jsfiddle.net/azlqy/

这种方法的好处是，页脚和页眉可以增长以匹配其内容，正文将自动调整自身。您也可以选择使用CSS限制它们的高度。

相关讨论

有一个称为视区高度/视区宽度的CSS单元。

例子

.mainbody{height: 100vh;}与html,body{width: 100vw;}相似

或90vh=视区高度的90%。

**IE9+和大多数现代浏览器。

相关讨论

这允许以最小宽度为中心的内容正文使我的窗体不折叠，这很有趣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}

body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}

div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

div#pageContent {
padding-bottom: 60px;
}

div#header {
width: 100%;
}

我的布局页面如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

示例：http://data.nwresearch.com/

另一个注意事项是，如果您希望整个页面的背景像您添加的代码一样，请从包装器中删除height: auto !important;：http://jsfiddle.net/mdares/a8vvw/

使用没有定义高度的top: 40px和bottom: 40px(假设您的页脚也是40px)，您可以让它工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}

杰西德

相关讨论

相对值如：height:100%将使用HTML中的父元素作为引用，若要使用高度中的相对值，则需要使HTML和body标记具有100%的高度，如：

HTML

1
2
3

CSS

1
2
3
4
5
6
7
8
9
10
11

html, body
{
height: 100%;
}

.content
{
background: red;
width: 100%;
height: 100%;
}

http://jsfiddle.net/u91lav16/1/

嗯，对于不同的浏览器有不同的实现。

在我看来，最简单和最优雅的解决方案是使用css calc()。不幸的是，这种方法在IE8和更低版本中不可用，在Android浏览器和移动Opera中也不可用。但是，如果您使用的是单独的方法，您可以尝试以下方法：http://jsfiddle.net/urskd/

标记：

CSS：

我的第二个解决方案包括粘性页脚方法和框大小。这基本上允许body元素填充其父元素的100%高度，并包括100%中使用box-sizing: border-box;填充的内容。http://jsfiddle.net/urskd/1/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}

第三种方法是使用jquery设置主要内容区域的最小高度。http://jsfiddle.net/urskd/2/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}

JS：

1
2
3
4
5
6

$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

相关讨论

不知道你到底想要什么，但我想我明白了。

标题-停留在屏幕顶部？页脚-停留在屏幕底部？内容区->适合页脚和页眉之间的空间？

您可以通过绝对定位或固定定位来实现这一点。

下面是一个绝对定位的例子：http://jsfiddle.net/fmyxy/1/

Markup：

1
2
3

Header
Main Body
Footer

CSS：

1
2
3

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

为了使它最好地工作，我建议使用%而不是像素，因为您会遇到不同屏幕/设备大小的问题。

虽然这听起来很容易，但实际上不是！

我已经尝试了很多事情来实现你试图用纯CSS做的事情，而我所有的尝试都是失败的。但是…如果您使用javascript或jquery，有一个可能的解决方案！

假设你有这个CSS：

1
2
3
4
5
6
7
8
9

#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}

假设您有这个HTML：

1
2
3

HEADER
BODY
FOOTER

使用jquery尝试此操作：

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});

注意：我没有在这个解决方案中使用绝对定位，因为它在移动浏览器中可能看起来很难看。

这个问题复制了使一个DIV填充剩余屏幕空间的高度，正确的答案是使用flexbox模型。

所有主要浏览器和IE11+都支持flexbox。对于IE 10或更高版本，或Android 4.3或更高版本，可以使用flexiejs垫片。

注意标记和CSS有多简单。桌上没有黑客之类的东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}

#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
background: yellow;
height: 100px; /* can be variable as well */
}

#body {
flex: 1;
border: 1px solid orange;
}

#footer{
background: lime;
}

1
2
3
4
5
6
7

Title
Body

Footer<br/>
of<br/>
variable<br/>
height<br/>

在上面的CSS中，flex属性简化flex grow、flex shrink和flex basis属性，以建立flex项的灵活性。Mozilla很好地介绍了灵活的盒子模型。

相关讨论