Stick footer on bottom of web page

Question

I want my footer to be always on the bottom of the page, even when the content is very short. I have checked this one http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page but does not work.

My HTML:

<body>
   <div id="container">
      <div id="header"></div>
      <div id="content"></div>
  </div>
  <div id="wrap-footer">
      <div id="footer"></div>
  </div>
 </body>

My CSS:

 #footer { 
   height: 320px;
   position: absolute;
   width: 100%;
   bottom: 0;
 }

With this one, when I have a short content is ok, but when I have a long one the footer goes in the middle of the page and stuck there. Does anyone have an idea ? Thanks in advance

`position: fixed` is the correct answer, but be aware that browser support for this is far from universal. In the past I've had to use something javascript-based to keep my footer in the right place. See http://www.quirksmode.org/css/css2/mobile.html for more details on browser support. — Dan, Oct 18 '13 at 14:43
position fixed, make the footer stick on the end on the page, but not where the content ends. so is not what I want — novellino, Oct 18 '13 at 14:44
@Dan From my understanding, he wants it at the bottom of the document, not the browser. — ediblecode, Oct 18 '13 at 14:45
Just realised that's what I get for skimming through a question - my apologies.. — MackieeE, Oct 18 '13 at 14:45
@jumpingcode How is that different from what happens if you don't have a `position` at all and let the browser layout divs as normal? — Dan, Oct 18 '13 at 14:49
This question has been asked before. A lot. The simplest solution that I always end up using can be found here: http://ryanfait.com/sticky-footer/. Bear in mind, this is pretty much impossible without fixing the height of your footer (until `position: sticky` is a reality). — CherryFlavourPez, Oct 18 '13 at 15:00
There are thousands of tutorials on the web that show exactly this. — Sliq, Oct 19 '13 at 20:46
I used this one http://www.cssstickyfooter.com/ at the end and it worked. — novellino, Oct 21 '13 at 14:17

score 0 · Answer 1 · answered Oct 18 '13 at 14:42

0

If you add position:fixed; to your footer it should work

#footer { 
   height: 320px;
   position: fixed;
   width: 100%;
   bottom: 0;
 }

answered Oct 18 '13 at 14:42

SaturnsEye

6,297
10
46
62

logic-unit · Answer 2 · 2013-10-18T15:29:27.647

0

Try using position:fixed instead.

http://jsfiddle.net/akMpT/

If you're just looking to push the footer down to the bottom of the page (as jumpingcode suggests), without fixing its position. Set the container height to 100%, and also any parent elements including <html> and <body>

Fiddle for the height:100% method: http://jsfiddle.net/akMpT/1/

As pointed out in the comments my second method isn't perfect. This subject has been tackled a hundred times, here's one example of how to do it correctly with CSS. Google has countless others. http://css-tricks.com/snippets/css/sticky-footer/

edited Oct 18 '13 at 15:29

answered Oct 18 '13 at 14:42

logic-unit

4,195
12
47
72

This is a sticky footer, not a footer at the bottom of the document. – ediblecode Oct 18 '13 at 14:44
The question is: Stick footer on bottom of web page. – logic-unit Oct 18 '13 at 14:45
@logic-unit I think he means he wants the footer always on at the bottom of the page. E.g: If the content is 100px in height the footer would still be all the way at the bottom of the page and not just sitting under the 100px content part. ( I think ) – Ruddy Oct 18 '13 at 14:47
yes exactly. position fixed is not what i want – novellino Oct 18 '13 at 14:48
@logic-unit Update your fiddle to show it works and I will +1 – Ruddy Oct 18 '13 at 14:50
1

@logic-unit and +1 Good job. – Ruddy Oct 18 '13 at 14:53
Your second fiddle does not work if document height is less than content height. Which OP mentions he wants. – ediblecode Oct 18 '13 at 15:07
It also doesn't work if document height is greater than 100% + footer height: http://jsfiddle.net/akMpT/2/ – ediblecode Oct 18 '13 at 15:11

score 0 · Answer 3 · answered Oct 18 '13 at 14:45

0

In this case it's because you are applying the positioning to the wrong element.

JSFiddle Demo

#wrap-footer { 
   height: 320px;
   position: absolute;
   width: 100%;
   bottom: 0;
    background:red;
 }

answered Oct 18 '13 at 14:45

Paulie_D

107,962
13
142
161

score 0 · Answer 4 · answered Oct 18 '13 at 14:48

providing "position:fixed" will keep your footer on the bottom or anywhere you like to keep it with additional properties (top:0;bottom:0;,left:0;,right:0;). Use them with "position property".

 #wrap-footer
{
   position: fixed;
   left:0;
   bottom: 0;
   height:10px; /*according to your will*/
}

ediblecode · Answer 5 · 2013-10-18T15:22:47.700

0

Sticky Footer (Bottom of Browser)

DEMO FIDDLE

CSS

footer { position:fixed; bottom:0px; }$(document).ready(function() {

Normal Footer (Bottom of Document)

DEMO FIDDLE

CSS

footer { bottom:0px; }

jQuery

$(document).ready(function() {
    moveFooter();
    $(window).resize(function() {
        moveFooter();
    });

    function moveFooter() {
        var dH = $(document).height();
        var wH = $(window).height();

        if (dH < wH)
            $('footer').css("position", "relative");
        else
            $('footer').css("position", "absolute");
    }
});

edited Oct 18 '13 at 15:22

answered Oct 18 '13 at 14:49

ediblecode

11,701
19
68
116

I feel using jQuery is a bit much but still its works. +1 Good job. – Ruddy Oct 18 '13 at 15:00
@Ruddy It's really difficult without jQuery for older browsers. – ediblecode Oct 18 '13 at 15:01
Javascript is overkill for the problem even in older browsers. – logic-unit Oct 18 '13 at 15:04
@logic-unit How would you propose to implement a non-sticky footer? Yours does not work if document height is less than window height or if window height and footer height are less than document height? – ediblecode Oct 18 '13 at 15:14
@logic-unit And you've pathetically downvoted because I pointed out flaws in your solution? – ediblecode Oct 18 '13 at 15:16
Downvote as OP doesn't ask for Javascript. – logic-unit Oct 18 '13 at 15:18
@logic-unit Oh dear... – ediblecode Oct 18 '13 at 15:19
So you've just gone round my previous answers to other questions and downvoted them? You've taken that downvote badly. Pretty sad. – logic-unit Oct 18 '13 at 15:25
What the? I haven't downvoted anything, not even your answer to this question. – ediblecode Oct 18 '13 at 15:25

Stick footer on bottom of web page

5 Answers5

Sticky Footer (Bottom of Browser)

Normal Footer (Bottom of Document)