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，完美的绝对底部
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
随机推荐
- props
// 这里是导入的包 import React, { Component } from 'react'; // 导入需要用到的组件 import { AppRegistry, Text, View } ...
- servlet3.0，web.xml的metadata-complete的作用
metadata-complete是servlet3.0规范中的新增的属性,该属性接受两个属性值,true或false.当该属性值为true时,该web应用将不会加载Annotation配置的web组 ...
- JQuery中$(document)是什么意思有什么作用
$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,因为它可以极大地提高web应用程序的响应速度 首先我解释一下jQuery jQuery有一个用来作为D ...
- git撤销commit
请参考该文章:http://www.cnblogs.com/ningkyolei/p/5026011.html 场景: 不小心commit了一个不应该commit的修改,但是还没有push,想撤销那个 ...
- http://10.11.112.12:8000/homePage.jsp?loginMode=JS
sdsad http://svn.paic.com.cn/svn/mis_pac/branches/MIS-PAC5.22.0
- C 语言 *** glibc detected *** free(): invalid next size (fast): 0x0000000000be1010 ***
. . . . . LZ 今天在写一个 Socket 程序的时候使用 malloc(3) 在堆上动态分配了一个结构体的空间,在使用完之后用 free(3) 函数释放空间的时候报 invalid nex ...
- FragmentTabHost
FragmentTabHost public class FragmentTabHost extends TabHost implements TabHost.OnTabChangeListener ...
- ImportError: No module named setuptools 解决方案
shell中输入: wget http://pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gz --no-che ...
- yield学习续：yield return迭代块在Unity3D中的应用——协程
必读好文推荐: Unity协程(Coroutine)原理深入剖析 Unity协程(Coroutine)原理深入剖析再续 上面的文章说得太透彻,所以这里就记一下自己的学习笔记了. 首先要说明的是,协程并 ...
- radio button(单选按钮)
单选按钮只是input输入框的一种类型. 每一个单选按钮都应该嵌套在它自己的label(标签)元素中. 注意:所有关联的单选按钮应该使用相同的name属性. 下面是一个单选按钮的例子: <lab ...