在各种浏览器中使最小高度为100％的元素的最佳方法是什么？ 特别是如果您的页眉和页脚固定高度的布局，如何使中间内容部分填充页脚固定在底部之间的100％空间？
我正在使用以下代码：CSS布局-100％的高度
Min-height
The #container element of this page has a min-height of 100%. That
way, if the content requires more height than the viewport provides,
the height of #content forces #container to become longer as well.
Possible columns in #content can then be visualised with a background
image on #container; divs are not table cells, and you don't need (or
want) the physical elements to create such a visual effect. If you're
not yet convinced; think wobbly lines and gradients instead of
straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain
at its bottom; since the min-height mentioned above does not prevent
#container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content
now provides the space for the absolute #footer. This padding is
included in the scrolled height by default, so that the footer will
never overlap the above content.
Scale the text size a bit or resize your browser window to test this
layout.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.webp") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
} |
对我来说很好。
要将自定义高度设置为锁定在某处：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| body, html {
height: 100%;
}
#outerbox {
width: 100%;
position: absolute; /* to place it somewhere on the screen */
top: 130px; /* free space at top */
bottom: 0; /* makes it lock to the bottom */
}
#innerbox {
width: 100%;
position: absolute;
min-height: 100% !important; /* browser fill */
height: auto; /*content fill */
} |
这是基于vh或viewpoint height的另一种解决方案，有关详细信息，请访问CSS单元。它基于此解决方案，而是使用flex。
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
| * {
/* personal preference */
margin: 0;
padding: 0;
}
html {
/* make sure we use up the whole viewport */
width: 100%;
min-height: 100vh;
/* for debugging, a red background lets us see any seams */
background-color: red;
}
body {
/* make sure we use the full width but allow for more height */
width: 100%;
min-height: 100vh; /* this helps with the sticky footer */
}
main {
/* for debugging, a blue background lets us see the content */
background-color: skyblue;
min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
/* for debugging, a gray background lets us see the footer */
background-color: gray;
min-height:2.5em;
} |
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
38
39
40
| <main >
<p >
This is the content. Resize the viewport vertically to see how the footer behaves.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
<p >
This is the content.
</p >
</main >
<footer >
<p >
This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.
</p >
<p >
This is the footer.
</p >
</footer > |
The units are vw , vh, vmax, vmin. Basically, each unit is equal to 1% of viewport size. So, as the viewport changes, the browser computes that value and adjusts accordingly.
您可以在此处找到更多信息：
Specifically:
1
2
3
4
| 1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest |
kleolb02的答案看起来不错。另一种方式是粘页脚和最小高度hack
为使min-height以百分比正确工作，同时继承其父节点min-height，诀窍是将父节点的高度设置为1px，然后子级min-height将正常工作。
演示页
纯CSS解决方案(#content { min-height: 100%; })在很多情况下都可以使用，但并非在所有情况下都可以使用-尤其是IE6和IE7。
不幸的是，您将需要求助于JavaScript解决方案才能获得所需的行为。
这可以通过计算内容的所需高度并将其设置为函数中的CSS属性来完成：
1
2
3
4
5
6
7
8
| function resizeContent() {
var contentDiv = document.getElementById('content');
var headerDiv = document.getElementById('header');
// This may need to be done differently on IE than FF, but you get the idea.
var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
contentDiv.style.height =
Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
} |
然后可以将此函数设置为onLoad和onResize事件的处理程序：
1
2
3
| <body onloadx="resizeContent()" onresize="resizeContent()">
. . .
</body> |
首先，应在content div之后用id='footer'创建一个div，然后简单地执行此操作。
您的HTML应该如下所示：
1
2
3
4
5
6
7
8
| <html>
<body>
...
</body>
</html> |
和CSS：
1
2
3
4
5
6
7
8
9
| ?html, body {
height: 100%;
}
#content {
height: 100%;
}
#footer {
clear: both;
} |
我同意Levik，因为如果您有侧边栏，并且要将它们填充空间以与页脚配合，则将父容器设置为100％，则不能将它们设置为100％，因为它们也将是父高度的100％表示使用清除功能时页脚最终会被压下。
如果您的标题为50px高度，页脚为50px高度，而内容仅自动适应剩余空间(例如100px)，而页面容器为该值的100％，则其高度将为200px。然后，当您将边栏高度设置为100％时，即使应该将其适当地放置在页眉和页脚之间，也应为200px。相反，它最终为50px + 200px + 50px，因此页面现在为300px，因为侧边栏设置为与页面容器相同的高度。页面内容中将有很大的空白。
我正在使用Internet Explorer 9，这是使用此100％方法时获得的效果。我还没有在其他浏览器中尝试过它，我认为它可能在其他一些选项中也可以工作。但它不会是普遍的。
可能是最短的解决方案(仅适用于现代浏览器)
这小段CSS使"the middle content part fill 100% of the space in between with the footer fixed to the bottom"成为：
1
2
| html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); } |
唯一的要求是您需要有一个固定高度的页脚。
例如此布局：
1
2
3
4
| <html><head></head><body>
<main> your main content </main>
</footer> your footer content </footer>
</body></html> |
您需要以下CSS：
1
2
3
| html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; } |
尝试这个：
1
2
3
4
5
6
7
8
9
| body{ height: 100%; }
#content {
min-height: 500px;
height: 100%;
}
#footer {
height: 100px;
clear: both !important;
} |
内容div下面的div元素必须具有clear:both。
您可以尝试以下方法：http://www.monkey-business.biz/88/horizo??ntal-zentriertes-100-hohe-css-layout/
那是100％的高度和水平中心。
如Afshin Mehrabani的回答中所述，您应该将body和html的高度设置为100％，但是要在此处获得页脚，请计算包装器的高度：
1
2
3
4
5
6
7
8
9
10
| #pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
} |
只是分享我曾经使用过的东西，并且效果很好
1
2
3
4
| #content{
height: auto;
min-height:350px;
} |
