被粘性页脚困住 - 不会停在预定的位置

Question

我正在使用粘性页脚的“版本”：http://ryanfait.com/sticky-footer/

我正试图让这个工作：http://www.ewsprojects.com/~lyons

我希望它停在左栏的末尾，但无论出于何种原因，我都无法让它在标题以外的任何内容之前停止。有没有办法让它在左栏后以第一个链接中演示的方式停止？

这是CSS：

* {
margin: 0;
}

#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}

#footer, .push{
height:40px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
}

如果您需要我提供任何其他信息，请告诉我。

Answer 1

我假设您希望它不高于左列，但是如果页面变得更高，是否希望它粘在页面底部？

如果是这种情况，则允许页脚高于左列的原因是因为左列绝对定位。因此，你的容器div没有任何强制它是一个特定的最小高度，因此当浏览器窗口较小时它变得比左列短。

试试这个：

• 将overflow: hidden;添加到您的#container div
• 将margin: 0 0 50px;添加到您的#left_bar div
• 确保#container有margin: 0 0 -40px;（抱歉我之前已将其删除）
• 从position div
中删除left，top和#left_bar规则
• 从position div
中删除#account_links规则

说实话，我不确定为什么你需要绝对定位很多这种布局。

修改 我编辑了上面的列表，因为我错过了一些东西。