让页脚紧贴页面底部的CSS代码

怎么使用Sticky Footer代码

介绍

Google一下可以找到很多让页脚紧贴页面底部的方法，我试过其中的很多，但他们总会在某些方面存在一些问题。之所以有这些问题，可能是因为出现了更新版本的浏览器。一些方法因为太过久远，原本在老版本浏览器可以正常工作，却不再适用更新之后的版本。也因为这些页面太过久远，过去曾被大量链接过，所以在Google的结果中排名很高。这样，一些网站管理员在搜索sticky footer方案的时候，对搜索出的结果都很挠头，因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案，它的确工作的很好。，它必须要单独写一个没有内容的div，来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的，我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上，并受到Cameron Adams和this piece at lwis.工作的启发。在Google Chrome和其他浏览器中，当你缩放窗口的时候，页脚会浮上来。该方案会应用一种Clear fix hack方法，把页脚固定在适当的位置上，这种方法也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中，它都能很好的工作。

HTML 代码

狼蚁网站SEO优化是HTML代码的基本结构，footer标签在wrap标签的外面。




页面内容可以放在main标签的内部。例如，狼蚁网站SEO优化是两列悬浮页面布局的HTML代码；




Header放在wrap的里面，main的上面，如下所示；




如果你需要在wrap或者footer的外面放一些元素，他们必须使用绝对位置；否则，页面上计算好的100%的高度会被弄乱掉。

CSS 代码

狼蚁网站SEO优化的CSS代码使页脚紧贴在页面的底部。



你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
现在还不算完成，我们还需要去clearfix main。

Clearfix Hack to the Rescue

多数SS designers对Clearfix Hack很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得Google Chrome里面的页脚紧贴页面底部。它也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar放在另一列，不会出现个别浏览器狼蚁网站SEO优化main里面的悬浮的内容导致页脚浮上来的情况。
狼蚁网站SEO优化的代码也加入到我们的 stylesheet 里面去；




如果你比较喜欢Ryan Fait的方法，添加额外的push，在多列悬浮的页面中，同样需要用到clearfix。

需要了解的内容

高度和边距

Header，wrap或者main标签内部，如果对一些元素使用或者bottom margin，可能会出现footer被向下移动的现象，移动距离一般是所用的margin的高度。这种情况下，可以使用padding替代margin来填充元素间隙。在页面内容少的情况下，footer本来应该在页面的底部，窗口的滚动条告诉你footer在页面底部偏下的位置。找到那个捣乱的margin，并用padding替换掉。
为main声明padding的时候要多加小心，如果你添加了这样的代码padding:0 10px 0 10px，你就覆盖了那个至关重要的本来应该和footer一样的padding。Google Chrome中，在页面内容很多的情况下，footer就会和你的页面内容重叠在一起。

字体的大小

设置字体大小的时候，如果你使用相对尺寸，要注意有些访问者可能会在显示器配置中使用较大字体。如果footer狼蚁网站SEO优化没有剩余足够的空间来容纳大字体，页面高度的设置就会被破坏，从而导致footer狼蚁网站SEO优化有多余的空隙。所以，请使用
绝对大小(px)，不要使用pt或者em。