将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; }