如何让你的 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/
*/
如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？的更多相关文章
- 实现自适应位置--footer紧贴浏览器底部
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览 ...
- 网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...
- css固定footer到浏览器底部的方法
<html> <head></head> <body> <div class="page-wrapper"> <d ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 【转】javascript浏览器参数的操作，js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
- div紧靠浏览器底部
<body> <div class='bottom'> 这个div紧贴浏览器底部,且居中显示 </div> </body> css代码: .bottom ...
随机推荐
- 创建一个自己的动态HTML-备
-.获取元素 改变属性 通过id来获取HTML元素 通过标签名找到HTML元素 通过类名来找到HTML元素 举个
- C++中实现回调机制的几种方式（一共三种方法，另加三种）
(1)Callback方式Callback的本质是设置一个函数指针进去,然后在需要需要触发某个事件时调用该方法, 比如Windows的窗口消息处理函数就是这种类型. 比如下面的示例代码,我们在Down ...
- Qt创建和使用动态链接库
一.创建共享库 1.新其他建项目,选择C++库 2.选择共享库,并取项目名称,单击下一步.这里取名位mylib 3.按默认配置单击下一步至模块选项,选择所需支持的模块.这里勾选Qtcore和QtGui ...
- qt-vs-addin：Qt4和Qt5之VS插件如何共存与使用
原则上,两者是不可以同时存在的,但是如果都安装了,该如何分别使用他们呢? Qt4 Visual Studio Add-in:官网可以下载安装程序,qt-vs-addin-1.1.11-opensour ...
- 把第三方的exe程序嵌入C#界面上
public partial class eTerm_Form : WinFormsUI.Docking.DockContent{public eTerm_Form(){InitializeCompo ...
- Android 开机启动通知
效果图: 学习: 1.静态注册实现开机启动 <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLET ...
- FreeBSD ipfw App配置Examples
Step # 1: Enabling IPFW Open /etc/rc.conf file # vi /etc/rc.conf Append following settings: firewall ...
- Swift字符串常用操作总结
转自:http://www.jianshu.com/p/52e7580166ff 1.string转换为Int/Long/Float/Double/Bool等 var str1="100&q ...
- .NET 面试题（2）
61.Application .Cookie和 Session 两种会话有什么不同? 1.Application 储存在服务端,没有时间限制,服务器关闭即销毁(前提是自己没写销毁方法) 2.Sessi ...
- MVC 校验
校验保障了MVC 应用程序安全性. Models 文件夹包含表示应用程序模型的类 1,创建一个项目MvcValidateDemo. 2,创建一个实体类UserInfo在Models中,包含Id.Use ...