最小高度100%页脚保持在底部的布局方法

发布时间：2006-05-19 11:02:02　来源：www.opera.com 网友评论 0 条

4、为了让 footer 能够刚好在最下方，我们可以给 footer 加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度，即 margin-top: -50px; 。但是这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方，显然这是失败的。所以我们还要给 content-box 和 sidebar 加一个父级元素，设定它的下方内补丁等于 footer 的高度，强制把 content-box 和 sidebar 向上推一个 footer 的高度。同时，因为 content-box 和 sidebar 是浮动元素，所以我们还要让它闭合浮动元素。这样就比较完美了。

#out-content {padding-bottom: 50px;}#out-content:after {  clear: both;  display: block;  font: 1px/0px serif;  content: ".";  height: 0;  visibility: hidden;}* html #out-content {height: 1%;}#footer {height: 50px;background: Background;margin: -50px auto 0;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Footer Stick</title><style type="text/css">/*<![CDATA[*/* { margin: 0; padding: 0;}html, body { height: 100%; text-align: center; font: 12px/1.4 Verdana, sans-serif; background: #f00;}#wrapper { width: 770px; min-height: 100%; background: #ccc; margin: auto; text-align: left;}* html #wrapper { height: 100%;}#header { background: Green; height: 40px;}#out-content { padding-bottom: 50px;}#out-content:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden;}* html #out-content { height: 1%;}#sidebar { float: left; width: 200px; background: Gray;}#content-box { float: right; width: 570px; background: Olive;}#footer { height: 50px; background: Background; width:770px; margin: -50px auto 0;}/*]]>*/</style></head><body><div id="wrapper"> <div id="header"> <h3>header</h3> <code>#header { background: Green; height: 40px; }</code> </div> <div id="out-content"> <div id="content-box"> <h3>content</h3> <code>#content { float: right; width: 80%; background: Olive; } </code><code>#content { float: right; width: 80%; background: Olive; } </code></div> <div id="sidebar"> <h3>sidebar</h3> <code>#sidebar { float: left; width: 20%; background: Gray; }</code> </div> </div></div><div id="footer"> <h3>footer</h3> <code>#footer { height: 50px; background: Background; width:770px; margin: -50px auto 0; }</code> </div></body></html>