好的,我知道这个问题在许多情况下已经提出,似乎答案因个案而异。
这是我的情况,我使用蓝图网格系统,高级结构如下。
所以页脚有时会粘到底部,但是当content_container中没有足够的内容时,它就不会。此外,如果调整窗口大小,则行为是不可预测的。如果内容容器中的内容不多,那么页脚内的列表总是浮动到右边并中断,不知道为什么。
<html>
<body>
<div id='main_container' class='container'>
<div class='header span-24 last'>
</div>
<div class='content_container span-24 last'></div>
</div>
<div class='footer'>
<ul class='footer_link'>
<li>faq</li>
<li>terms</li>
<!--etc -->
</ul>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#main_container {
min-height: 100%;
height: auto !important;
height/**/: 100%;
/* for IE6 */;
}
.footer {
margin-top: -200px;
background: #38385c none repeat scroll 0 0;
height: 200px;
position: relative;
}
.content_container {
padding-bottom: 200px;
background-color: white;
}
.footer_links {
/* overflow:hidden;*/
/*text-align: left;*/
/*float: left;*/
/*clear: both;*/
/*margin-left: 1em;*/
height: 100%;
padding-left: 0;
white-space: nowrap;
list-style-type: none;
}
.footer a {
color: white;
text-decoration: none;
}
.footer_links {
/* overflow:hidden;*/
/*text-align: left;*/
/*float: left;*/
/*clear: both;*/
/*margin-left: 1em;*/
height:100%;
padding-left: 0;
white-space:nowrap;
list-style-type: none;
}
.footer a {
color:white;
text-decoration:none;
}