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

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

5、举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。

<!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;}#wrapper { width: 100%; 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; background: Gray; margin-right: -200px; width:200px;}#content-box { float: right; width: 100%; background: Olive;}#content { margin-left: 200px;}#footer { height: 50px; background: Background; 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">      <div id="content">        <h3>content</h3>        <code>#content {          float: right;          width: 80%;          background: Olive;        } </code></div>    </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>

其他问题，如果有人希望中间两栏高度相同的话可以使用图片欺骗法，见创建各栏同高的多栏布局。

OK，经过以上方法，这个布局应该是比较完美了。

3/3 |‹ ‹‹ 1 2 3