哔哔one
我正在使用以下代码：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;}对我来说很好。