我正在使用以下代码:CSS布局-100%的高度
最小身高
此页面的#container元素的最小高度为100%。这样,如果内容所需的高度大于视口提供的高度,则#content的高度也会强制#container变长。然后,可以使用#container上的背景图像将#content中的可能列可视化;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;
}
对我来说很好。