CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
先说我们为什么会使用到这个CSS底部布局解决方案:
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。
下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。
甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
代码写法
HTML代码:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。
CSS代码:
下面是主要的CSS代码，让你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;}说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。
就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。
对#main部份进行著名的Clearfix Hack:
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */注: 该方案测试于两栏悬浮布局，兼容各大主流浏览器，包括Google Chrome。
P.S:
- 网络上之前比较知名的footer布局有Ryan Faits创造的，不过它的方法在HTML代码中会有一个空的div层。严格来说，是不符合语义网代码标准的。
- 另外，还有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代码。
- 这样一比较，上面看似简单的纯CSS，就显得伟大许多了。
OK, 没有了。如果没看懂，具体的使用方法和说明可以到原站查看。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} html,
body,
#wrap {
box-sizing: border-box;
height: 100%;
border: 1px solid green;
} body> #wrap {
height: auto;
min-height: 100%;
} #main {
padding-bottom: 150px;
}
/* 必须使用和footer相同的高度 */ #footer {
position: relative;
margin-top: -150px;
/* footer高度的负值 */
height: 150px;
clear: both;
background: red;
} .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/ * html .clearfix {
height: 1%;
} .clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head> <body>
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
</div>
<div id="side">
对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
</div> </div>
</div>
<div id="footer">
卧槽
</div>
</body> </html>
CSS Sticky Footer: 完美的CSS绝对底部的更多相关文章
- 【转载】CSS Sticky Footer: 完美的CSS绝对底部
下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- css让footer永远保持在页面底部
案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...
- css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- Sticky Footer，完美的绝对底部
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
随机推荐
- Mysql 与日期和时间相关的函数
目录: 常用日期函数 时间加减函数 date_forma函数 1. 常用日期函数 now() current_timestamp() sysdate() 实例一: 从上图可以看出三个函数都是用来获取当 ...
- Android支付之支付宝封装类
今天介绍下在android中如何集成支付宝支付到自己的APP中去.让APP能够拥有方便,快捷的支付功能. 我们在做Android支付的时候肯定会用到支付宝支付,根据官方给出的demo做起来非常费劲,所 ...
- C# 关于时间
1.2016/7/8 00:10:10 转换成 2016-07-08T 00:10:10 在用VB动态调用WevService的时候,传入的时间格式为2016/7/8 00:10:10,导致调用出错, ...
- 改进的SQL Express LocalDBB
介绍一种改进的SQL Express LocalDB LocalDB专门为开发商.它是非常容易安装,无需管理,但它提供了相同的T-SQL语言,编程表面和客户端供应商定期的SQL Server Expr ...
- node.js 基础学习笔记1
1. node -v 查看版本 node -e --js代码 node --进入编辑模式 Ctrl+C 退出编译模式 var http=require('http') http.createServe ...
- CCKJ 笔试
面向对象三个特性: 面向对象技术是目前流行的系统设计开发技术,它包括面向对象分析和面向对象程序设计.面向对象程序设计技术的提出,主要是为了解决传统程序设计方法--结构化程序设计所不能解决的代码重用问题 ...
- php执行流程
1.源码文件编写,php源文件 2.词法分析,token 3.语法分析,生成opcode并组成opcode array 4.执行opcode,返回结果
- nginx 版本介绍
Nginx官网提供了三个类型的版本Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版Stable version:最新稳定版,生产环境上建议使用的版 ...
- 字符串和json之间的互相转化
在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...
- opengles tutorial
https://developer.apple.com/library/ios/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide ...