提问人：Chris Porter 提问时间：8/25/2008 最后编辑：AwaisChris Porter 更新时间：7/16/2023 访问量：310028
100% 最小高度 CSS 布局
100% Min Height CSS layout
问：
使元素具有 100% 最小高度的最佳方法是什么 广泛的浏览器？
特别是，如果你有一个带有 和 固定 ，headerfooterheight
如何使中间内容部分填充中间的空间，并将其固定到底部？100%footer
答：
119赞
ollifant
8/25/2008
#1
我正在使用以下一个： CSS 布局 - 100% 高度
最小高度
此页面的 #container 元素的最小高度为 100%。那 方式，如果内容需要的高度超过视口提供的高度， #content 的高度也 #container 变长。 然后，可以使用背景可视化 #content 中可能的列 #container 上的图片;div 不是表格单元格，您不需要（或 want）的物理元素来创造这样的视觉效果。如果你是 尚未被说服;想想摇晃的线条和渐变，而不是 直线和简单的配色方案。
相对定位
因为 #container 有一个相对的位置，#footer 将永远保持 在它的底部;由于上面提到的最小高度并不能阻止 #container 缩放，即使（或者更确切地说，尤其是当）#content 迫使 #container 变长时，这也会起作用。
底部填充
由于它不再处于正常流动状态，因此填充底部 #content 现在为绝对 #footer 提供了空间。此填充是 默认包含在滚动高度中，以便页脚将 切勿与上述内容重叠。
稍微缩放文本大小或调整浏览器窗口的大小以测试这一点 布局。
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.gif") 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;
}
对我来说效果很好。
评论
0赞
Vitaly
3/4/2010
在该示例中，IE7 中尝试增加字体大小 （Ctrl + “+”），并且破坏了粘性页脚:(
0赞
William Niu
7/5/2011
这个似乎在 IE9 中不起作用......它适用于其他 IE 吗？
14赞
henrikpp
8/28/2008
#2
kleolb02 的回答看起来还不错。另一种方法是将粘性页脚和最小高度黑客相结合
评论
0赞
Mert S. Kaplan
1/11/2023
链接已损坏
6赞
levik
9/4/2008
#3
纯解决方案 （） 在很多情况下都有效，但并非在所有情况下都有效 - 尤其是 IE6 和 IE7。CSS#content { min-height: 100%; }
不幸的是，您需要求助于 JavaScript 解决方案才能获得所需的行为。
这可以通过计算内容所需的高度并将其设置为函数中的 CSS 属性来完成：<div>
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';
}
然后，您可以将此函数设置为 和 事件的处理程序：onLoadonResize
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
1赞
Loaden
1/7/2010
#4
你可以试试这个： http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ 这是 100% 的高度和水平中心。
2赞
MilanBSD
4/22/2010
#5
试试这个：
body{ height: 100%; }
#content {
min-height: 500px;
height: 100%;
}
#footer {
height: 100px;
clear: both !important;
}
内容 div 下面的元素必须具有 .divclear:both
30赞
Chris
3/30/2011
#6
要将自定义高度锁定到某个位置：
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 */
}<div id="outerbox">
<div id="innerbox"></div>
</div>
0赞
Yuda Prawira
7/29/2011
#7
只需分享我使用过的内容，并且效果很好
#content{
height: auto;
min-height:350px;
}
3赞
Clint
4/18/2012
#8
我同意 Levik 的观点，因为如果您有侧边栏并希望它们填充空间以与页脚相遇，则父容器设置为 100%，您不能将它们设置为 100%，因为它们也将是父高度的 100%，这意味着在使用清除功能时页脚最终会被推下。
可以这样想，如果你的页眉是 50px 高度，你的页脚是 50px 高度，内容只是自动调整到剩余空间，比如说 100px，页面容器是这个值的 100%，它的高度将是 200px。然后，当您将侧边栏高度设置为 100% 时，即使它应该紧贴页眉和页脚之间，它也是 200px。相反，它最终是 50px + 200px + 50px，因此页面现在是 300px，因为侧边栏设置为与页面容器相同的高度。页面内容中会有一个很大的空白。
我正在使用 Internet Explorer 9，这就是我使用这种 100% 方法时得到的效果。我没有在其他浏览器中尝试过它，我认为它可能在其他一些选项中起作用。但它不会是普遍的。
3赞
Afshin Mehrabani
10/12/2012
#9
首先，您应该在 div 之后创建一个 with，然后简单地执行此操作。divid='footer'content
您的 HTML 应如下所示：
<html>
<body>
<div id="content">
...
</div>
<div id="footer"></div>
</body>
</html>
还有 CSS：
html, body {
height: 100%;
}
#content {
height: 100%;
}
#footer {
clear: both;
}
7赞
vsync
8/28/2013
#10
为了正确使用百分比，在继承其父节点时，诀窍是将父节点高度设置为，然后子节点的高度将正常工作。min-heightmin-height1pxmin-height
html {
height: 100%
}
body {
min-height: 100%;
height: 1px;
}
div {
background: blue;
min-height: 100%;
height: 1px;
}
div div {
background: red;
min-height: 100%;
width: 50px;
}<div>
<div>
</div>
</div>评论
0赞
fider
2/24/2014
很好，但是如果演示中 div 的内容高度高于浏览器窗口，则向下滚动后背景将被剪切
0赞
vsync
2/24/2014
@fider - 请提供一个显示您提到的问题的 Playground。
2赞
Konstantin Smolyanin
9/20/2013
#11
可能是最短的解决方案（仅适用于现代浏览器）
这一小块 CSS 使："the middle content part fill 100% of the space in between with the footer fixed to the bottom"
html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }
唯一的要求是您需要有一个固定高度的页脚。
例如，对于此布局：
<html><head></head><body>
<main> your main content </main>
</footer> your footer content </footer>
</body></html>
你需要这个 CSS：
html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }
0赞
Fanky
1/13/2014
#12
正如 Afshin Mehrabani 的回答中提到的，您应该将 body 和 html 的高度设置为 100%，但要将页脚放在那里，请计算包装器的高度：
#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);
}
29赞
Stanislav
8/16/2015
#13
这是另一个基于 或 的解决方案，有关详细信息，请访问 CSS 单元。它基于此解决方案，该解决方案改用 flex。vhviewpoint height
* {
/* 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;
}<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>单位为 vw、vh、vmax、vmin。基本上，每个单元等于视口大小的 1%。因此，当视口发生变化时，浏览器会计算该值并相应地进行调整。
您可以在此处找到更多信息：
具体说来：
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
0赞
peja
3/20/2021
#14
正如 MDN 文档中指定的 height 属性一样，它不会被继承。因此，您需要将其设置为 100%。众所周知，任何网页都以html开头，然后以body开头，您需要在两者中设置height：100%。
html,
body {
height: 100%;
}
<html>
<body>
</body>
</html>
任何标记为身高 100% 的孩子都将是父母身高的 100 部分。在上面的示例样式中，我们将 html 标签设置为 100%，它将是可用屏幕高度的全高。然后正文是 100%，所以它也将是全高，因为它的父级是 html。
评论
min-height: 100vh;vh: vertical heightvhviewport heightvwviewport widthvminviewport minimum