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

开发者佳沫技术 2022年11月16日

0 收藏 350 点赞 2,545 浏览 691 个字

一个可以用的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 Faithttp://ryanfait.com/*/