一个可以用的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. code first 尝试

    建表: 1.先用EF连接数据库,配置connectionStrings <configSections> <!-- For more information on Entity Fr ...

  2. 改变VC生成exe图标

    默认 VC 生成的 EXE 文件的图标很大众,可以根据以下办法修改 exe 的图标. 以 Visual C++ 6.0 为例: 1. 创建项目,添加代码,并且保证项目可以正常编译. 2. 为项目增加资 ...

  3. Cracking the coding interview 第二章问题及解答

    文章的缘由可以参考此篇文章.目前完成了第二章,代码放在github上,地址在此.问题的描述都在对应的代码文件中.其他的章节仍在在进行中. 如果代码有问题,欢迎指正,谢谢. yetuweiba

  4. SPOJ375.QTREE树链剖分

    题意:一个树,a b c 代表a--b边的权值为c.CHANGE x y  把输入的第x条边的权值改为y,QUERY x y 查询x--y路径上边的权值的最大值. 第一次写树链剖分,其实树链剖分只能说 ...

  5. java 获取系统变量(环境变量和设置变量)

    前言 环境变量这个概念不陌生, 就是操作系统的环境变量. 系统变量就是java本身维护的变量. 通过 System.getProperty 的方式获取. 对于不同的操作系统来说, 环境变量的处理可能会 ...

  6. JavaScript学习总结（二）

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...

  7. Window vagrant 安装部署【转】

    回想以前,想要安装个虚拟机是多么的麻烦.先要费尽心机找到想要的操作系统镜像文件,然后安装虚拟化软件,按照其提供的GUI界面操作一步步创建,整个过程费时费力.但是,自从使用了Vagrant以后,咱腰不酸 ...

  8. Network 20Q--Q2 How does Google sell ad spaces?

    在使用Google搜索的时候会发现,搜索出来的页面除了在左边显示搜索结果以外,还会页面的右边推荐一些广告.那么Google是怎么从这些广告挣钱以及广告商可以通过Google广告获得什么利益呢? Goo ...

  9. JSP实现分页功能

    分页须知知识点: (1)JDBC2.0的可滚动结果集. (2)HTTP GET请求. 一.可滚动结果集   Connection con  = DriverManager.getConnection( ...

  10. C语言的学习-基础知识点

    ---BOOL BOOL BOOL a = YES; printf("%d\n", a); a = NO; printf("%d", a); , b = ; B ...