0

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

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

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

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

4

3 回答 3

1

您正在通过声明将文章推倒top: 12em。您应该为页脚提供相同的属性，这可以解决问题：http: //jsfiddle.net/s9QyR/1/

于 2013-03-27T12:04:47.413 回答
0

您还应该推动页脚top:12em; ，这将在正确的位置添加页脚。演示

于 2013-03-27T12:17:01.790 回答
0

我认为这就是你所追求的 - 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;
}

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

您可能想尝试这种方法，以避免不得不将所有内容都放在行中。

于 2013-03-27T14:56:07.940 回答