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

Question

我下载了 CSS 粘页脚和960 网格系统代码。

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

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

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

知道我哪里出错了，我该如何解决这个问题？

Answer 1

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

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

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

参考：

• StickyFooter 的 HTML 结构

Answer 2

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

.container_12 {
    margin-bottom: 100px;
    }

#footer这将弥补margin-top: -100px

Answer 3

链接似乎很好。好像你修好了。它在页脚中嵌入了我要建议的 css：clear:both。