4

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 deeply i have three div's #header, #container, #footer.

So if i will remove the #container than footer should not be go anywhere that should stable on his permanent location.

explain with simple method everyone will understand easily...

see the my fiddle:-http://jsfiddle.net/dZDUR/5/

4 Answers 4

4

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/

1
  • if the content height is more page height, then this solution isn't work fine.
    – bebosh
    Sep 19, 2017 at 9:00
1

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

2
  • and how would he fit it to the bottom of the browser window (as there are several used screen resolutions and/or browser client heights)
    – jgauffin
    Mar 22, 2012 at 10:20
  • with position fixed you can position your div like you want and it will stay there. to position the div you can use top, bottom, left and right.
    – QQping
    Mar 22, 2012 at 10:24
1

I think this will help you.

http://jsfiddle.net/4VEqh/

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

0
0

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)

2
  • no, this method won't work with scrolling. scrolling wasn't really mentioned though :)
    – turpachull
    Mar 22, 2012 at 10:27
  • QQping's answer works much better actually - essentially just change from absolute to fixed. I'll edit answer accordingly
    – turpachull
    Mar 22, 2012 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.