100％最小高度CSS布局
在广泛的浏览器中使最小高度达到100％的最佳方法是什么？ 特别是如果你有一个页眉和页脚高度固定的布局，你如何让中间内容部分填充页脚之间的空间的100％，并将页脚固定在底部？
我正在使用以下一个： CSS布局 – 100％的高度
最小高度
此页面的#container元素的最小高度为100％。 这样，如果内容需要比视口提供的更高的高度，则#content的高度也会使#container变长。 #content中可能的列然后可以用#container上的背景图像可视化; divs不是表格单元格，你不需要（或不想）物理元素来创build这样的视觉效果。 如果你还不确定， 认为摇摆的线和梯度，而不是直线和简单的配色scheme。
相对定位
由于#container具有相对位置，#footer将始终保持在底部; 因为上面提到的最小高度并不妨碍＃容器缩放，所以即使（或者更确切地说当）#content强制#container变长，这也是可行的。
填充底
由于它不再处于正常stream程中，所以＃content的padding-bottom现在为绝对#footer提供了空间。 此填充默认包含在滚动高度中，因此页脚不会重叠上述内容。
稍微缩放文本大小或调整浏览器窗口大小来testing此布局。
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; }
为我工作得很好。
要将自定义高度设置为locking在某处：
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>
这是另一个基于vh或viewpoint height解决scheme，详细访问CSS单元 。 它基于这个解决scheme ，它使用flex代替。
* { /* 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>
kleolb02的答案看起来不错。 另一种方式是粘脚和最小高度的组合
一个纯粹的CSS解决scheme（ #content { min-height: 100%; } ）可以在很多情况下工作，但是并不是所有的情况下，尤其是IE6和IE7。
不幸的是，你将需要诉诸JavaScript解决scheme，以获得所需的行为。 这可以通过计算您的内容<div>的期望高度并将其设置为函数中的CSS属性来完成：
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事件的处理程序：
<body onload="resizeContent()" onresize="resizeContent()"> . . . </body>
对于min-height正确地使用百分比，而inheritance它的父节点min-height ，技巧将设置父节点高度为1px ，然后孩子的min-height将正常工作。
演示页面
我同意Levik，因为父容器设置为100％，如果你有侧边栏，并且希望他们填充空间来满足不能设置为100％的页脚，因为它们将是父代高度的100％意味着当使用清除function时，页脚最终被推下。
想想看，如果你的页眉是50px的高度，你的页脚是50px的高度，内容只是自动填充剩余空间，比如说100px，页面容器是这个值的100％，它的高度是200px。 然后，当您将边栏高度设置为100％时，即使它应该适合页眉和页脚之间的距离，也是200px。 相反，它的结果是50px + 200px + 50px，所以页面现在是300px，因为侧边栏被设置为与页面容器相同的高度。 页面内容会有一个很大的空白。
我正在使用Internet Explorer 9，这是我正在使用这种100％的方法得到的效果。 我没有尝试过在其他浏览器中，我认为它可能在其他一些选项。 但它不会是普遍的。
首先你应该在你的content div之后创build一个id='footer'的div，然后简单地做到这一点。
你的HTML应该看起来像这样：
<html> <body> <div id="content"> ... </div> <div id="footer"></div> </body> </html>
而CSS：
html, body { height: 100%; } #content { height: 100%; } #footer { clear: both; }
可能是最短的解决scheme（仅适用于现代浏览器）
这一小块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; }
尝试这个：
body{ height: 100%; } #content { min-height: 500px; height: 100%; } #footer { height: 100px; clear: both !important; }
content div下面的div元素必须clear:both 。
你可以试试这个： http : //www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/这是100％的高度和水平中心。
只是分享我已经使用，并很好地工作
#content{ height: auto; min-height:350px; }
如Afshin Mehrabani的回答中所述，您应该将body和html的高度设置为100％，但要获得页脚，请计算包装的高度：
#pagewrapper{ /* Firefox */ height: -moz-calc(100% - 100px); /*assume ie 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); }
