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

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;(抱歉，我之前告诉你要删除它)
• 从 #left_bar div 中删除 position、left 和 top 规则
• 从您的 #account_links div 中删除 position 规则

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

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