从网上找的固定页脚的例子在自己的项目上面却不好使。。。

为了达到上图所示的效果，我查询了http://www.jb51.net/web/76954.html网站，里面有四种解决方法，我选择了第三种，但是照着葫芦画瓢之后我这个方法对于我的网站并不不适用。当时我的主界面已经搭建完成，其中包括头部，侧边菜单，右边内容，页脚四部分，除页脚外，全部使用的绝对定位。那么问题来了，为什么上面那个网站上的例子单独使用没问题，和我的项目整合起来就不行了呢？

纠结了我一整天的问题其实很简单，第三种方法里面

html代码：

<div id="container"> 
<div id="header">Header Section</div> 
<div id="page" class="clearfix"> 
<div id="left">Left sidebar</div> 
<div id="content">Main Content</div> 
<div id="right">Right Content</div> 
</div> 
<div class="push"><!-- not put anything here --></div> 
</div> 
<div id="footer">Footer Section</div> 

CSS部分代码：

#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/ 
} 
.push, 
#footer { 
height: 60px; 
clear:both; 
} 

这里可以看出来push，footer在container的最底部。

div没有用到绝对定位，所有每一个div都占据了它本来应该占据的空间，而我的div全部都是绝对定位，所以理论上它并不占据空间，所以悲了个催的，不管我怎么调整，页脚都在屏幕height：100%的位置。

解决方法：主体内容部分（也就是内容可能会超出屏幕的那个盒子）使用浮动而不是使用绝对定位。Fixed！！