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

如果你像这样在容器中添加一个margin-bottom

.container_12 {
    margin-bottom: 100px;
    }

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

Answer 3

链接似乎很好。好像你修好了。并且它有一个嵌入在页脚中的CSS，我将建议：清楚：两者。