被粘性页脚难住了 - 不会在预期的地方停止

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: hide; 添加到您的 #container div
• 将 margin: 0 0 50px; 添加到您的 #left_bar code> div
• 确保 #container 有 margin: 0 0 -40px; （抱歉我之前告诉过你要删除它）
• 删除 position， #left_bar div 中的 left 和 top 规则
• 从 #account_linksposition 规则code> div

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

编辑：
我编辑了上面的列表，因为我遗漏了一些东西。