文章链接：http://m.blog.csdn.net/Inuyasha1121/article/details/50787152
永远悬浮在下方：
.Footer{font-size:20px;width:99%;position:fixed;left:22px;
bottom:1px;border-radius:10px;border:solid black;}
只有拉到最下面才会有
.wrap{ min-height:100%; }
.container {
padding-bottom:30px; /* 需要 >= footer的height值 */
}
.footer {
margin-top: -30px; /* footer高度的负值 */
height: 30px;
font-size:20px;
width:99%;
padding-bottom:3px;
margin-bottom:8px;
border-radius:10px;
border:solid black;
}
<body>
页眉
<div class='wrap'>
<div class="container">
主页的内容
</div>
</div>
<div class='footer'>
页脚
</div>
</body>
该方法的主要思路就是把文档分为两部分，把页脚往上全部归为一部分，页脚为一部分，把.footer往上的所有内容设置为高度100%，然后留个内补不写内容用来放.footer，而.footer使用了负的margin来代替position从而移动元素，把margin-top设置成自身高度的负值，就完成任务了。详细理解如下：
在顺序布局的情况下要想页脚显示在最下面，首先想到的就是上面的元素都已经把空间占满了，所以给.container设置了min-height：100%，但是100%的高度会占满窗口，.footer会被挤到窗口下面需要移动滚动条才能看到的地方，
我们需要手动的把.footer往上移一个自身height的高度，所以用到了margin-top，大家都知道margin是一个元素的外边距，而页面布局中区分每个元素的正是外边界，下一个元素的开始位置是位于上一个元素外边距的结束处之后的，而把margin设为负值，是把外边距往回收，就意味着下一个元素可以一直叠到我收回的边界的位置（这种方法跟改变文档流移动元素的效果类似，但并没有破坏文档流），所以要把.footer往上移，可以设置margin-top为负的自身高度值。
然后要在.container中留出一个padding-bottom的内补不写内容，空间就是等于或大于.footer的高，留给.footer显示。
其中还给.container设置了盒模型属性box-sizing：border-box，该值是IE的盒模型，元素的宽高会包含内边距和外边距，这样便于给高度100%的.container调整padding-bottom而给.footer留空间。
如果不想使用box-sizing：border-box，（浏览器一般默认为content-box）则可以在.container外包裹一个div
处理不好的话会这样。。。
解决方案---加一行js：
<script>
if(document.getElementsByClassName('footer')[0]!=undefined)
{
if(document.getElementsByClassName('footer')[0].offsetTop<window.outerHeight*0.82)
{
document.getElementsByClassName('footer')[0].style.position="fixed";
document.getElementsByClassName('footer')[0].style.top=window.outerHeight*0.81+"px";
}
}
</script>
