- 浏览: 149332 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
CSS Sticky Footer: 完美的CSS绝对底部
在帕兰映像中看到一篇好文,将它转贴到这儿。
原帖:http://paranimage.com//css-sticky-footer/
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。
先说我们为什么会使用到这个CSS底部布局解决方案:
当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部,而留下了大量空白。
对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。
下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。
甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
代码写法
<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, 没有了。如果没看懂,具体的使用方法和说明可以到原站查看。
发表评论
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2014-05-06 11:07 316<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 577web前端页面性能优化 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 661http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 513提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1031PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 585web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 556LABjs、RequireJS、SeaJS 哪 ... -
流体布局
2013-09-04 11:53 649流体布局 在我的另一篇文章《弹性+固宽布局》http://li ... -
《弹性+固宽布局》
2013-09-04 11:32 691《弹性+固宽布局》 在 ... -
前端布局
2013-03-20 11:59 607网页布局; http://www.subcide.com ... -
Web前端
2012-11-06 15:57 586HTML5迟来的API:Page Visibility ... -
腾讯Web前端
2012-11-06 15:55 0日期格式化:System.out.println(new ...
相关推荐
先说我们为什么会使用到这个CSS底部布局解决方案:当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底部
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的...
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底...
什么是sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。...
主要介绍了详解Sticky Footer 绝对底部的两种套路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
粘性页脚展示了 3 种制作粘性页脚的方法。 每个 HTML 文件都与其他文件相同,但 CSS 类...方法弹性盒 (CSS) 绝对定位 (CSS) jQuery (JS)弹性盒 (CSS)优点非常简单和干净的 CSS 允许可变高度的页脚没有无样式内容的闪光
HTML5 +粘性踏板 一个简单HTML5模板,其中包含一个页脚。 专为那些需要粘贴页脚的小型网页而设计。 只需在CSS中调整body和footer高度标签的下距底部即可满足您的需求。
您可能还发现Skeleton非常轻巧,即使页面内容很短,对页脚的跨浏览器支持也不会保留在页面底部。 该存储库包含Skeleton 2.0.4附带的样板“基本页面”的最低增强版本。 该页面添加了必要的包装div来创建粘性页脚,...
我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解: 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可滚动的。 二是当内容...
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部...
怎么使用Sticky Footer代码 介绍 Google一下可以找到很多让页脚紧贴页面底部的方法,我试过其中的很多,但他们总会在某些方面存在一些问题。之所以有这些问题,可能是因为出现了更新版本的浏览器。一些方法因为太...
在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅...