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

*/

　　

如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？的更多相关文章

  1. 实现自适应位置--footer紧贴浏览器底部

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览 ...

  2. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  3. css固定footer到浏览器底部的方法

    <html> <head></head> <body> <div class="page-wrapper"> <d ...

  4. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  5. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  6. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  7. 【转】javascript浏览器参数的操作，js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

  8. Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

    Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...

  9. div紧靠浏览器底部

    <body> <div class='bottom'> 这个div紧贴浏览器底部,且居中显示 </div> </body> css代码: .bottom ...

随机推荐

  1. SPI协议总结

    四种工作模式: Mode 0 CPOL=0, CPHA=0 Mode 1 CPOL=0, CPHA=1Mode 2 CPOL=1, CPHA=0 Mode 3 CPOL=1, CPHA=1 常使用Mo ...

  2. NGINX和PHP之间的环境变量传递

    昨天遇到的,想将IP访问转换成域名访问.则NGINX需要将相关的变量转换后传递给PHP. 网上有一系统的方法: 前面讲过该不该把信息写在服务器配置文件里?.通过php扩展hidef来define常量, ...

  3. qt实现头像上传功能（写了4个类，朝十晚八的博客，非常好）

    想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...

  4. WCF 基于Cookie的登录验证回传问题的解决

    参考资料: http://www.cnblogs.com/czcz1024/p/3333138.html http://megakemp.com/2009/02/06/managing-shared- ...

  5. 构建WDK驱动出现fatal error U1087: cannot have : and :: dependents for same target

    原因:WDK在编译驱动时,是不允许源文件所在的路径(全路径)中包含空格的,如果你包含了空格,就会出现上述错误. 解决方法:把源文件放在一个没有空格的路径下. reference: http://blo ...

  6. 基于Bootstrap 3.x的免费高级管理控制面板主题：AdminLTE

    AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题.AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设 ...

  7. TableView 校检表

    这俩天学习了tableView 校检表 主要就是通过一个方法来跟踪当前选中的行.下面将声明一个NSIndexPath 的属性来跟踪最后选中的行.这篇文章希望能给那些初学者带来学习的乐趣.不说了直接上代 ...

  8. (poj 1475) Pushing Boxes

    Imagine you are standing inside a two-dimensional maze composed of square cells which may or may not ...

  9. VS2012 中使用Emacs布局

    微软的反开源行为导致它不断的衰落,问题是还不反省. 下面这篇文章介绍了如何安装emacs布局的插件: http://marxistprogrammer.blog.163.com/blog/static ...

  10. WPF 实现控件间拖拽内容

    想实现这样一个常用功能:在ListBox的一个Item上点住左键,然后拖拽到另外一个控件(如ListView中),松开左键,数据已经拖拽过来. 步骤如下: 1. 设置ListBox 的AllowDro ...