HTML 代码
下面是HTML代码的基本结构，footer <div>标签在wrap <div>标签的外面。
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
页面内容可以放在main <div>标签的内部。例如，下面是两列悬浮页面布局的HTML代码；
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
Header放在wrap的里面，main的上面，如下所示；
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
如果你需要在wrap或者footer的外面放一些元素，他们必须使用绝对位置；否则，页面上计算好的100%的高度会被弄乱掉。
CSS 代码
下面的CSS代码使页脚紧贴在页面的底部。
html, body, #wrap {height: 100%}
body >#wrap {height: automin-height: 100%}
#main {padding-bottom: 150px} /* must be same height as the footer */
#footer {position: relative
margin-top: -150px/* negative value of footer height */
height: 150px
clear:both}
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap <div>的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main <div>的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
现在还不算完成，我们还需要去clearfix main <div>。
Clearfix Hack to the Rescue
多数SS designers对Clearfix Hack很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar放在另一列，不会出现个别浏览器下面main <div>里面的悬浮的内容导致页脚浮上来的情况。
下面的代码也加入到我们的 stylesheet 里面去；
.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 */
如果你比较喜欢Ryan Fait的方法，添加额外的push <div>，在多列悬浮的页面中，同样需要用到clearfix。
*sticky属性 与relative类似 但是其offset实根据最近的拥有scrolling box的先祖元素来确定的，如果没有拥有scrolling box的话会根据viewport来计算
那么什么是scrolling box呢？
An HTML scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property. （From https://www.html.am/html-codes/scrollboxes/html-scrollbox.cfm ）
姑且理解为
含有滚动条的或者含有overflow属性的皆为scroll box(试了下当设置为auto,overlay,sroll的时候会产生效果，估计就是所谓的scroll box)
实践：
1.设置父元素overflow:auto,子元素设置为sticky且top:10px
可以看到sticky的元素根据距其最近的具备scoll box的父元素计算offset
2.去除overflow:auto
可以看到之前设置的top属性无效了,找不到先祖元素为scrollbox的了，故基于viewport来计算offset:
看到有些文章说设置overflow:auto或者hidden不会生效，特地试了下发现是有效的..很疑惑。
1.auto
2.hidden
可以看到定位属性还是产生了效果。（到底是sticky还在生效还是已经类似于relative效果，待研究）
还是基于父元素为scroll box:
1.对于块级兄弟元素(位于普通文档流中)
前一个节点为block元素，自身为sticky，不会覆盖前面普通文档流中的元素
2.对于块级兄弟元素(脱离文档流:：float)
对于脱离文档流的元素(float或者absolute)会直接按祖先元素的顶部开始计算
sticky VS fixed
1.先来看 fixed
2.再来看sticky, 去除父元素overflow（使之根据viewport计算）
可以看到当给其父元素设置固定高度后，sticky元素会受制于父元素的高度，即最多到达父元素的底部
浏览器兼容性：
*仅为个人学习之用
Ref: https://www.w3.org/TR/css-position-3/#sticky-position
