网站内容溢出到页脚

http://jsfiddle.net/talmuda3/s9QyR/网站内容溢出到页脚

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

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

如何调整内容以使页脚保持在底部，并且内容在整个网站上延伸而不重叠页脚。请温柔。检查克里斯Coyier的网站的任何提示 - 可能只是错过了一些东西。谁能帮忙？

来源

2013-03-27 user2215323

您正在用top: 12em声明推低文章。你应该给页尾相同的属性，这解决了问题：http://jsfiddle.net/s9QyR/1/

来源

2013-03-27 12:04:47

我认为你必须等待15分钟才能接受答案。 – gaynorvader 2013-03-27 12:12:17

好吧，我不知道:) – 2013-03-27 12:13:51

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

来源

2013-03-27 12:17:01

我觉得这是你追求的 - 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-27 14:56:07 apaul

你也有宽度：100％;'和'宽度：80％;'在你的文章上。 – apaul 2013-03-27 14:57:51

网站内容溢出到页脚

回答

相关问题