将div一直保持到页面底部

将div保持到页面底部说的是，页面内容满屏和不满屏都在底部，采用js是最常用的方法，但如果能用纯css解决最好了，有网上找了半天，还是有强人的，方法如下：

HTML结构：

<body>
<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>
</body>

CSS样式：

html,
body {
   margin:0;
   padding:0;
   height:100%;
   _height:100%; /* IE6 hack */
} 
#container { 
 　min-height:100%; 
　 position:relative; 
} 
#header { 
 　background:#ff0; 
 　padding:10px; 
} 
#body { 
 　padding:10px; 
 　padding-bottom:60px; /* Height of the footer */
}
#footer {
　  position:absolute; bottom:0; 
　  width:100%; 
    height:60px; /* Height of the footer */ 
 　 background:#6cf; 
}
posted @ 2012-06-29 10:55  大洋  阅读(823)  评论(0)  编辑  收藏  举报