如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？

一个可以用的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/

*/

　　

posted @ 2015-02-15 15:42  Richard2014  阅读(189)  评论(0)  编辑  收藏  举报