How To Make A Sticky Footer

How to make a sticky footer i have tried on google found some results but didn't get the exactly how this is working so here i have made some rough mockup to understand the things

Solution 1:

Give height:100% to html, body & main container. When you give height:100% to .container it's push down the footer & after that we give footer margin from the top same as his height. Like this:

 html,body{
   height:100%;
 }
.header {
background:red;
width:500px;
height:100px;
}

.container {
background:yellow;
width:500px;
height:100%;
}

.footer {
background:green;
width:500px;
height:100px;
    margin-top:-100px;
}

HTML

<div class="container">
    <div class="header">
</div>
</div>

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

Check this http://jsfiddle.net/dZDUR/8/

Solution 2:

http://jsfiddle.net/dZDUR/6/ give the footer the position: fixed value and you can position is like you want. in this example with top: 200px; so it will stay there even without the #container

Solution 3:

I think this will help you.

http://jsfiddle.net/4VEqh/

Even if you remove the container div, footer will not move.

Solution 4:

You can use absolute positioning via CSS. I'm assuming your footer and header are not nested in the container since removing the container would then remove the footer. So, supposing you have this structure:

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

The footer div has to be absolute positioned (taking it out of the flow), with the bottom set to 0 - e.g.:

body {
  position:relative;
}

.footer {
  position: absolute; /* or position:fixed for scrolling */
  bottom: 0;
}

you may or may not need to set position:relative on the body (is this default behaviour?).

If there is scrolling in the picture, like QQping mentions, use position:fixed instead of position:absolute (otherwise same code)