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

Question

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

粘性页脚的工作方式与预期一致-如果内容窗格为空，则页脚将停留在视口的底部，并在已满时将页脚向下推。

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

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

你知道我哪里出问题了吗?我该如何解决这个问题？

Answer 1

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

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

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

参考：

• StickyFooter's HTML structure

Answer 2

如果您向容器添加一个边距-底部，如下所示

.container_12 {
    margin-bottom: 100px;
    }

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

Answer 3

链接看起来没问题。看起来你修好了。它在页脚中嵌入了css，这是我要建议的:clear:两者都有。