html - 将页脚贴在底部

Question

我知道这是一个讨论很多的话题。但即使阅读了很多相关帖子，我仍然没有真正弄清楚我需要什么。

我遇到的问题是绝对位置 div 不固定在页脚上。我有一个单页网站。

这是我网站的简化代码:

HTML:

    <div id="e1">hi</div>
    <div id="e2">hi</div>
    <div id="e3">
    <div id="footer">My beautifull footer thingy</div>
    </div>

CSS:

body, html {

margin: 0 0 0 0;
padding: 0 0 0 0;
    width:100%;
height:100%;

    #e1 {height:100%; width:100%; background:#ff9000; }
    #e2 {height:100%; width:100%; background:#000;}
    #e3 {height:100%; width:100%; background:#ff9000;}

#footer {
text-align:center;
line-height:80px;
height:300px;
width:100%;
position:absolute;
background:#fff;
}

jsfiddle:http://jsfiddle.net/skunheal/4LXLZ/1/

我知道解决方案之一是添加

顶部:300%； 边距顶部:-300px；

但这不是我想要的，因为有一个 cms 主干，我无法判断有多少页面处于事件状态。所以我需要一些将自己设置为他的 parent 的东西(在这种情况下为#e3)

我考虑过的另一个解决方案是在计算有多少页面处于事件状态后使用 javascript 更改 css。但我认为这将是一个临时解决方案，应该更容易，对吧？

有人知道一个简单的 css 修复方法吗？

问候

Answer 1

可以设置相对于eX的位置

#e3 {height:100%; width:100%; background:#ff9000; position : relative}

example