中间文本底部的页脚

Question

I'm trying to keeping footer at bottom no matter how much text there is in the content. What am i doing wrong? The layout is:

    .top{
    width:500px;
    height:100px;
    background-color:black;
}

.content{
    width:500px;
    min-height:100%;
    position:relative;
}

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:absolute;
    bottom:0;
}

<div class="top"></div>
<div class="content"></div>
<div class="footer"></div>

http://jsfiddle.net/RDuWn/68/

Regards, Simon

Answer 1

I think that you have to use position:fixed like this:

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed
    bottom:0;
}

DEMO

Answer 2

I would remove position:absolute; bottom:0; position:absolute; bottom:0; from .footer Fiddle

Answer 3

in your jsfiddle ,

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

works for me..

see the fiddle

see bottom:-1px; it will assure your position across the browsers...

Answer 4

Your code works but you need to set min-height instead of height in your footer class so that it can stretch to your content size.

.footer{
    width:500px;
    min-height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

Here's how it will look with that change, and some placeholder content added to the footer.

Answer 5

It was your absolute positioning that caused the overlap. An absolute element is removed from the normal flow and becomes "ignored", per se, by the other elements when determining position. If you don't specify a position in the css, it defaults to static positioning and all elements will properly be in the "flow".

http://www.w3schools.com/css/css_positioning.asp

Here's the CSS I used:

.top{
    width:500px;
    height:100px;
    background-color:pink;
}

.content{
    width:500px;
    min-height:100%;
    background-color:blue;
}

.footer{
    width:500px;
    height:100px;
    background-color:black;
    margin-bottom:0px;
}