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

最新推荐文章于 2021-06-03 09:06:20 发布

翻译最新推荐文章于 2021-06-03 09:06:20 发布 · 3k 阅读

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单易用的CSS粘性Footer解决方案，适用于各种浏览器，包括IE5及以上版本、Chrome、Firefox、Safari和Opera。该方案仅需少量CSS代码和基本的HTML标记即可实现Footer始终位于页面底部的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文

地址http://ryanfait.com/sticky-footer/

A CSS Sticky Footer that just works

We've all tried to use a CSS Sticky Footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understandCSS Sticky Footer are thankfully over. With just a few simple CSS classes with minimal extra HTML markup, I've fashioned aCSS Sticky Footer that even beginners can get a handle on. It's been tested in IE 5 and up, Chrome, Firefox, Safari and Opera.

Usage of the CSS Sticky Footer

Great! This is exactly what I'm looking for! Can I use it?

Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.

翻译

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

*/