具有 CSS 粘性页脚 + 960 网格布局的重叠块答案

【问题标题】：Overlapping blocks with CSS sticky footer + 960 grid layout具有 CSS 粘性页脚 + 960 网格布局的重叠块
【发布时间】：2012-06-12 17:19:45
【问题描述】：

我下载了CSS sticky footer 和960 grid system 代码。

粘性页脚按预期工作 - 如果内容窗格为空，页脚会粘在视口底部，当页脚已满时会向下推。

我用的是960格系统的css粘滞页脚代码，但是当侧边栏内的内容展开到页脚时，页脚与侧边栏内容的末尾重叠：

http://noseyparka.me.uk/sandbox/

知道我哪里出了问题以及如何解决这个问题吗？

【问题讨论】：

标签： css sticky-footer 960.gs

【解决方案1】：

您误用了 StickyFooter，您的包装器缺少额外级别的定义，以保护正文内容不与页脚重叠。

要解决这个问题，请将main id 添加到 body-content 级别（在我们的例子中是 960gs 容器）以适应：

<div id="wrap">
    <div class="container_12" id="main">
        <!-- ... -->
    </div>
</div>

参考：

StickyFooter's HTML structure

【讨论】：

我无法明白我是怎么错过的。非常感谢 Eliran - 你是明星！

【解决方案2】：

链接看起来不错。好像你修好了。它在页脚中嵌入了我要建议的 css：clear:both。

【讨论】：

Adobe BrowserLab 表示不同。该问题在所有浏览器中都可见，包括 Chrome 18.0 on Windows。
喂！你是对的，它没有出现在其他浏览器中。仅在 FF 中。在浏览了您的粘性页脚链接之后......遇到了一些规格。尝试将 padding-bottom:100px 添加到您的#wrap。它应该工作。事情就是这样，无论您的负边距顶部在页脚中，它都必须与 #wrap 的填充底部相匹配。否则会重叠。希望这行得通！
再一次，这种方法解决了重叠问题，但它会将页脚推到视口之外产生滚动条，这在我看来首先违背了使用粘性页脚的目的。
但这就是你的粘性页面链接所说的。他们说要确保 #main 中的 padding-bottom 应该与 #footer 中的负上边距相匹配。如果 padding-bottom:100px 不起作用，请调整数字直到它适合您。另外，我开始怀疑粘性页脚的概念。您似乎想要一个在向下滚动页面时始终保持在视线范围内的东西，是吗？因为您提供的粘性页脚页面没有这样做。他们的页面就是对此的证明（即，当页面向下滚动时，页脚不会留在视口中）。现在很困惑
很抱歉在这件事上如此健谈！但是，如果您希望您的页脚无论页面状态如何都始终保持在视线范围内，我认为您不要使用它。您使页脚的位置固定。就像我现在用谷歌搜索的这个例子：davidwalsh.name/css-fixed-position 甚至这个：stackoverflow.com/questions/10465250/css-sticky-footer。

【解决方案3】：

如果您像这样向容器添加底部边距

.container_12 {
    margin-bottom: 100px;
    }

这将补偿具有margin-top: -100px 的#footer

【讨论】：

这种工作方法解决了重叠问题，但它也将页脚推到视口之外产生滚动条，这首先破坏了使用粘性页脚的目的。
minus-top 是什么？你的意思是top: -100px;？
对不起，这是一个过度的网站。应该是 margin-top: -100px;我想我在那里创建了自己的 CSS。从来都不是一个好主意。