палка нижнего колонтитула внизу

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

Вы можете установить положение относительно Примеру

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

example

Answer 2

Решение простое, футер должно быть положение фиксируется не абсолютным. Вот Обновленного скрипку http://jsfiddle.net/4LXLZ/2/

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

Answer 3

вам нужно поставить ногу на самом деле под #e3

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

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