页脚在屏幕中间

Question

I'm trying to make a layout where the footer is always at the end. However, the HTML body should have a div fixed to the left and right split another with the remaining size.

Until then I have no problem ... But when the right div has many lines of HTML not generally continues until the end, and the footer is in the middle of the screen.

When # main is with position: relative; happens the error, but if you take it, the speakers do not work the way I need.

I've tried everything and could not fix.

Example here: http://jsfiddle.net/WzE3g/

#principal 
{
    width:100%; 
    float : left;   
    word-wrap: break-word;    
    /*display: block;*/
    position:relative;
    /*position:inherit;*/
    bottom:0;
}

Answer 1

Use position:fixed; instead of absolute in #rodape element. This way it will be always at the the end.

Answer 2

我想您是在谈论粘性页脚...这是一个带有说明的示例