一个可以用的CSS驱动的可粘在底部的Footer
我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底部的日子已经过去了。一段简单的css class定义和几句简单的HTML组合起来可以搞定这个事情。我做了一段简单的就连初学者也可以使用的 css 的 footer 。我已经在IE5及以上版本的ie和 chrome firefox safari 甚至 opera上测试过它了。
CSS 固定的 FOOTER 的使用方法
“太好了!这就是我一直寻找的!我能使用它吗?”
当然。这是没有任何条款,许可,费用以及需求的。随便使用吧。(后面是一堆废话,不翻译)
代码示例
html代码
<body>
<div class="wrapper">
网页主体
<!-- push 是用来给footer占位的-->
<div class="push">
</div>
</div>
<div class="footer">
底部内容,比如版权声明
</div>
</body>
css代码
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* 这个 -155px 要跟 .footer 的高度一样 */
}
.footer, .push {
height: 155px; /* .push 要跟 .footer 的高度一样 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/