下面是我找到的一个比较完美的方法,来自国外的设计达人,纯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 */
相关推荐
先说我们为什么会使用到这个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设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅...