Question

http://jsfiddle.net/talmuda3/s9QyR/

footer {
    margin-top: 1em;
    width: 100%;
    height: 20em;
    position: relative;
    bottom: 0;
    left: 0;
}

离线网站的布局很棘手。内容溢出到页脚。部分代码如上所述。

如何调整内容以使页脚保持在底部，并且内容在整个站点上延伸而不会与页脚重叠。请温柔。查看Chris Coyier网站上的任何提示 - 可能只是遗漏了一些东西。有人可以帮忙吗？

Answer 1

您正在使用top: 12em声明推送文章。您应该为页脚提供相同的属性，从而解决问题：http://jsfiddle.net/s9QyR/1/

Answer 2

你还应该推出将页脚添加到正确位置的页脚top:12em;。 demo

Answer 3

我认为这就是你所追求的 - jsFiddle

article {
    margin-top:12em;
    width:80%;
    height:100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
    padding: 1em;
    z-index: 2;
    background: transparent;
    overflow: visible;
}

footer {
    margin-top: 1em;
    width: 100%;
    height: 20em;
}

似乎改变定位打破了元素的自然流动。

您可能想尝试这种方法，以避免必须将所有内容放在线下。

页面内容溢出到页脚

3 个答案: