- 浏览: 155915 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 356<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 602web前端页面性能优化 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 709http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 557提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1061PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 643web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 596LABjs、RequireJS、SeaJS 哪 ... -
流体布局
2013-09-04 11:53 689流体布局 在我的另一篇文章《弹性+固宽布局》http://li ... -
《弹性+固宽布局》
2013-09-04 11:32 730《弹性+固宽布局》 在 ... -
前端布局
2013-03-20 11:59 686网页布局; http://www.subcide.com ... -
Web前端
2012-11-06 15:57 670HTML5迟来的API:Page Visibility ... -
腾讯Web前端
2012-11-06 15:55 0日期格式化:System.out.println(new ...
相关推荐
CSS Sticky Footer布局方案就是为了解决一种常见问题:当页面内容不足以填满整个视口时,底部会留在屏幕的上方,留下大片空白,这在视觉上并不理想。本文将详细探讨CSS Sticky Footer的原理和实现方法。 首先,CSS ...
在网页设计中,保持页面底部(Footer)始终固定在页面底部,即使页面内容较少时也不与主要内容区域重叠,这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验,使得用户在浏览页面时...
CSS Sticky Footer布局是一种常见的网页设计模式,它的目的是让页脚始终保持在页面的最底部,无论内容区域的内容多少。这种布局方式特别适用于响应式设计,尤其是手机网页,它能确保页面内容较少时,页脚紧贴屏幕...
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的...
首先,将body和container元素设置为相对定位,然后将footer设置为绝对定位,并将其底部与容器底部对齐。这种方法适用于内容较少的情况。 ```css body, .container { position: relative; min-height: 100%; } ....
Sticky Footer,也被称为绝对底部布局,是一种网页设计中常见的页面布局方式,旨在确保无论页面内容多少,页脚始终位于屏幕底部或者与内容区域底部对齐。这种布局方法在用户体验中很重要,因为它提供了清晰的界面...
在Web开发中,Sticky footer布局是一种常见的页面布局方式,它可以使页脚(footer)在页面中始终固定在屏幕的底部位置,而不受内容区域内容多少的影响。这种布局方式特别适合那些需要保持页脚始终可见的网站设计。在...
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底...
1. **CSS定位**:CSS中的定位(positioning)属性是实现粘性页脚的关键。通常,我们可以将页脚的`position`属性设置为`fixed`,使其相对于浏览器窗口而不是其父元素进行定位。这样,即使用户滚动页面,页脚也会固定...
2. **粘性定位法**:CSS3引入了`position: sticky`,可以在内容滚动到一定位置时使元素保持固定。 ```css footer { position: -webkit-sticky; /* 对旧版Safari的支持 */ position: sticky; bottom: 0; /* ...
在IT界,"粘连底部"(Sticky Footer)是一种常见的网页布局技术,它使得页面底部始终固定在视口的底部,即使内容区域不足时也不会上移,而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用,尤其在响应...
粘性页脚展示了 3 种制作粘性页脚的方法。 每个 HTML 文件都与其他文件相同,但 CSS 类...方法弹性盒 (CSS) 绝对定位 (CSS) jQuery (JS)弹性盒 (CSS)优点非常简单和干净的 CSS 允许可变高度的页脚没有无样式内容的闪光
在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让底部元素如页脚始终保持在页面的最底部,无论内容区域有多高。这种效果在各种类型的网站和应用中都很常见,比如页面底部的版权信息、导航菜单...
您可能还发现Skeleton非常轻巧,即使页面内容很短,对页脚的跨浏览器支持也不会保留在页面底部。 该存储库包含Skeleton 2.0.4附带的样板“基本页面”的最低增强版本。 该页面添加了必要的包装div来创建粘性页脚,...
4. ** Sticky Footer**:一种常见的解决方案是Sticky Footer,它利用负的margin值和绝对定位来确保页脚始终在视口底部。当内容不够填充整个屏幕时,页脚位于页面底部;当内容超出屏幕时,页脚会随着滚动条向下移动,...
第二种方法通常被称为“粘性底部”( Sticky Footer)布局,它利用了负的`margin-top`和相对定位。在这种方法中,页脚被赋予一个绝对或固定的位置,然后通过计算页面内容的高度并加上负的顶部外边距,使其在视觉上...
然后,通过给footer添加绝对定位并设置bottom为0,使其始终贴在底部。主要内容区域(main)则需用padding-bottom来预留空间,以避免被footer覆盖。 ```css .dui-container { position: relative; min-height: ...