将页脚粘贴到底部

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％;    margin-top：-300px;

但这不是我想要的，因为有一个cms骨干，我不知道有多少页面是活跃的。所以我需要一些可以将自己设置为父母的东西（在这种情况下是＃e3）

我想解决的另一个解决方案是在计算了多少页面活动后使用javascript来更改css ..但我认为这将是一个临时解决方案，它应该更方便吗？

任何人都知道简单的css修复？

问候

Answer 1

解决方案很简单，页脚需要定位而不是绝对。这是更新的小提琴http://jsfiddle.net/4LXLZ/2/

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

Answer 2

您可以设置相对于eX的位置

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

example

Answer 3

你需要将脚实际放在#e3

之下

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

<div id="wrapper">
<div id="e3"></div>
    <div id="footer">My beautifull footer thingy</div>
</div>