100％最小高度CSS布局
在各种浏览器中使最小高度达到100％的最佳方式是什么？ 特别是如果你有一个页眉和页脚高度固定的布局，你如何让中间内容部分填满页脚之间100％的空间，页脚固定在底部？
我使用以下一种：CSS布局 - 100％高度
最小高度
此页面的#container元素的最小高度为100％。 这样，如果内容需要比视口提供的更高的高度，那么#content的高度也会使#container的高度变得更长。 #content中的可能列然后可以用#container上的背景图像可视化; div不是表格单元格，并且您不需要（或不需要）物理元素来创建这样的视觉效果。 如果你还不确定， 想象摇摆的线和渐变，而不是直线和简单的配色方案。
相对定位
由于#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;
}
对我来说工作得很好。
要将自定义高度设置为锁定在某处：
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解决方案，详细信息请访问CSS单元。 它基于这个解决方案，它使用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>