Search code examples
htmlcsssticky-footer

stick footer to the bottom

I know this is a much discussed topic. but I'm still not really figuring out what I need even when readed a lotof related posts.

I have the problem where a position absolute div doesnt stick to the footer. I have a one page website.

Here is a simplified code of my website:

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;
}

what I want

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

I know one of the solutions is to add

top:300%; margin-top: -300px;

But this is not what I want since there is a cms backbone and I cant tell how much pages are active. So I need something that will set itself to his parent (#e3 in this case)

Another solution I tought about was using javascript to change the css after counting how much pages are active.. but I think this would be a temporary solution and it should be way more easy right?

Anyone knows an easy css fix?

Greetings

Solution

  • You can set position relative to eX 

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

    example