css3 高度最小100%,100％最小高度CSS布局

我正在使用以下代码：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;

}

对我来说很好。