Question

怎么使用Sticky Footer的HTML和CSS代码

Answer 1

Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上，并受到Cameron Adams和this piece at lwis.net工作的启发。在Google Chrome和其他浏览器中，当你缩放窗口的时候，页脚会浮上来。该方案会应用一种Clear fix hack方法，把页脚固定在适当的位置上，这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中，它都能很好的工作。
HTML 代码
下面是HTML代码的基本结构，footer <div> 标签在wrap <div>标签的外面。
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
页面内容可以放在main <div>标签的内部。例如，下面是两列悬浮页面布局的HTML代码；
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
Header放在wrap的里面，main的上面，如下所示；
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
如果你需要在wrap或者footer的外面放一些元素，他们必须使用绝对位置；否则，页面上计算好的100%的高度会被弄乱掉。
CSS 代码
下面的CSS代码使页脚紧贴在页面的底部。
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap <div>的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main <div>的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
现在还不算完成，我们还需要去clearfix main <div>。
Clearfix Hack to the Rescue
多数SS designers对Clearfix Hack很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar放在另一列，不会出现个别浏览器下面main <div>里面的悬浮的内容导致页脚浮上来的情况。
下面的代码也加入到我们的 stylesheet 里面去；
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
如果你比较喜欢Ryan Fait的方法，添加额外的push <div>，在多列悬浮的页面中，同样需要用到clearfix。