来源：David's Blog /
文章链接：/post/-06-17/40051753968
相关参考：
/chenyuming507950417/p/4003651.html
/ahjesus/archive//11/26/2263986.html
下面是David博客的原文
博主研究了两天多，终于利用 CSS+DIV 让页脚始终在页面的最底部了 T T
1、利用 bottom 属性？
在实践之前，很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面，可是这个是行不通的。如果使用了如下方法：
footer
{
bottom: 0px;
}
我可以很诚实地告诉你，写了根没写压根就没区别。因为版面默认用的是 “position: relative;”，这会让版面从上至下地排布，而不能够独立地让 footer 始终在页面的最底部。
position: fixed？
那么自然就会想说，那如果用“position: fixed;”属性呢？
footer
{
position: fixed;
bottom: 0px;
}
这个也是不行的，因为“fixed”会让 div 相对浏览器，而非页面。那么出现的情况将是无论怎么移动页面，始终都有一个 footer 在浏览器的底部，不甚美观。
position: absolute？
那么又想了，如果用“position: absolute”呢？
footer
{
position: absolute;
bottom: 0px;
}
这个也是不行的。用了这个属性，会有一种初始化的效果，让 footer 一开始就在浏览器的最底部，然后你拉动页面，它不会落到页面最低部，而是上去了。实际上就是与其他网页内容产生了重叠。这个也是绝对不允许的。
2、解决方法
在解决的时候，我查了相当多的资料。如果用纯 CSS 的话，似乎都指向一种叫 Sticky Footer的方法。不过网上的基本都是抄来抄去，只有代码，没有解释什么的，我就不吐嘈了。
原理解析
这种方法的原理很简单，用到了 2 个属性：min-height 和 margin。
其中，min-height 都有个很奇特的属性值：100%。这个属性值是指当前浏览器窗口的高度，实际上就是能显示的最大高度(一个屏幕的高度)了。那么自然可以联想到，如果将内 容部分设成“min-height: 100%”，就能够将内容部分占有一个屏幕的高度，那么页脚起码会在屏幕的外面。只要稍加改进，便能融入 Header、Content、Footer 这三个部分，并使得 Footer 起码在屏幕的最底部，而且当内容长度增加时，会在页面的最后面，而不至于遮挡内容。
可是要注意的是，“100%”的这个属性对于“height”或者“min-height”来说有点奇怪，它在使用之前貌似要对“100%”的定义进行初始化。而我们知道，“html”这个结点是沾满一个屏幕的，那么就要先写这样的内容：
body, html
{
height: 100%;
}
一个值得关注的是，如果我们用的是 框架，因为它是基于 form 的，所以仅仅设置 body 和 html 还不够，还要设置 form 的相应属性：
form
{
height: 100%;
}
而为了页眉与页脚紧贴浏览器边框，我们还要设置相关的 margin 与 padding 为 0，以防止空隙的出现。而为了简单起见，就对全局所有的容器都设置这样的一个默认值吧。
*
{
margin:;
padding:;
}
好了，到了这里就可以放心地去用“min-height: 100%;”了。
那么怎么解决在内容很少的时候，页脚能够显示在浏览器的最底部，而不是什么情况都被置于一个屏幕的高度之外呢？
可能看到上面的第 2 个我说的要使用的属性，大家就大概明白了。对，就是用 margin 这个属性。不过要声明的一点是，下面的方法用到了一些不太符合规范的方法，就是加多了一个空 div 用作显示格式定制，而其本身不起任何作用。
先看看网页的 html 文本来了解一下框架吧：
可见，页眉与内容都被一个叫“Wrapper”的容器包着，然后在他们后面有个叫“FooterPush”的东西，其实这个就是我之前说的仅用于控制显示格式的空 div 了。然后，Footer 是置于所有内容之外的。
然后我们这样思考：如果 FooterPush 的高度与 Footer 相同，然后 Footer 有一个“margin-top”的属性，它的值是 Footer 的高度的负值，即例如 Footer 的高度是 120px，然后：
.Wrapper .FooterPush
{
height: 120px;
}
.Footer
{
margin-top: -120px;
height: 120px;
}
那么发生的情况将会非常神奇，实际上就是 Footer 刚好就覆盖在 FooterPush 的上面了。那么这个时候，我们只要将 Wrapper 的高度设为“100%”，这样所有的东西就至少能够在一个屏幕内现实完毕了。
这样，就能够达到当内容少时，Footer 最高能够在一个屏幕的最底部显示；而当内容比较长的时候，Footer 能够很乖巧地在所有内容的后面，而不至于遮挡内容。
OK，大工告成了吧！那我就贴个完整些的代码吧。
完整代码
Html：
css
*
{
margin:;
padding:;
}
html, body, form
{
height: 100%;
}
.Wrapper
{
min-height: 100%;
}
.Wrapper .FooterPush
{
height: 120px; /* Footer 的高度 */
}
.Footer
{
clear: both; /* 清除浮动元素格式 */
position: relative;
margin-top: -120px; /* Footer 高度的负值 */
height: 120px;
}
by: David Qiu.
再次对原文作者表示感谢。在此收藏，只是当做笔记。
CSS + DIV 让页脚始终底部
一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
005-CSS让页脚始终在底部不论页面内容多少
让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一:
CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...
让footer始终待在页面底部
1.把html和body的height属性设为100%;保证content的高度能撑满浏览器; 2.把#content的高度也设置为100% ,但是这里我们使用了“min-height”属性,而不是的 ...
【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 /css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS
原博客地址:/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
随机推荐
web标准之道——笔记
字体设置 sans和sans-serif为通用字体,具体哪个字体被最终应用由浏览器决定,通用字体只有在其他字体都无效时才会被当作代替方案.通用字体应该放在最后面 sans衬线字体 容易阅读,一般使用在 ...
MVC Router学习
Route顾名思义就是路由的意思了. 我们先打开Global.asax查看代码 可以看到 routes.MapRoute( "Default", // 路由名称 & ...
Android 设置进度条背景
Android 设置进度条背景 直接上代码
算术编码Arithmetic Coding－高质量代码实现详解
关于算术编码的具体讲解我不多细说,本文按照下述三个部分构成. 两个例子分别说明怎么用算数编码进行编码以及解码(来源:ARITHMETIC CODING FOR DATA COIUPRESSION): ...
ARM学习笔记5——程序状态寄存器
当前程序状态寄存器CPSR可以在任何位处理器模式下被访问,它包含条件码标志.中断控制.当前处理器模式以及其他状态和控制信息.CPSR的结构图如下: 一.条件标志位 CPSR最高4位:N(Negativ ...
配置vim之插件
涉及linux平台下ctags, taglist插件 ctags是一个用于产生代码索引文件的插件,它产生的索引可以帮助我们更快的定位到特定位置. ctags支持很多语言,比如java, c, c++, ...
linux常用系统配置命令汇总
系统配置及查看信息相关命令 # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看C ...
ios 添加工程依赖只能生成Generic Xcode Archive 文件原因
问题说明:工程引用了外部类库, 默认生成的archive是Generic Xcode Archive 格式的 无法发布和生成ipa文件. 解决处理: 1.将Build Settings->De ...
第11课 std::bind和std::function(2)_std::bind绑定器
1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...
