Issue with sticky footer at the bottom of the page

Question

I'm currently shaping up my code editor's webpage.

I had a sticky footer (meaning sticking to the bottom of the page, no matter what).

However, though I don't know how, all of a sudden I must have tweaked something and it went unstick again.

Sticky footer

And guess what, I cannot fix it. :S ( I have to admit CSS was never really my thing... )

Any ideas?

P.S. The issue is noticeable in all pages/subpages, not just the homepage.

UPDATE:

Guys, thanks a lot for your super-fast replies. I think you got it right. But not 100% - perhaps I didn't explain what I need it clearly.

Adding a position:fixed does fix it to the bottom. But, let's say in the homepage, the footer is above the content (like the top navbar). This is not what I needed. By "sticky", I mean it has to stay at the bottom of the page. If it's a short page, then it'll appear at the bottom. If it's a long page, you'll see it only if you scroll at the very bottom of the page.

why not make the content element a min-height: of xx % so that the footer will be at the bottom of the page without setting a position attr. Then when this content element has to much data in it, and the page scrolls, the footer will be still at the bottom of the page — Dennis Anderson, Nov 06 '14 at 08:51
Have you had a look at http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page or http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height? Also you could find a list of different methods [here](http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header). — Hashem Qolami, Nov 06 '14 at 09:14

Stijn Geukens · Answer 1 · 2014-11-06T09:45:58.133

2

Change position of #footer to fixed seems to work fine.

http://css-tricks.com/snippets/css/fixed-footer/

UPDATE

After you update: remove the margin-bottom: 45px on the body element and add min-height: 100%

body {
    /* margin-bottom: 45px; */
    position: relative;
    min-height: 100% /* for short pages */
}

The footer position can then remain absolute.

UPDATE

html {
    height: 100%;
}

edited Nov 06 '14 at 09:45

answered Nov 06 '14 at 08:25

Stijn Geukens

15,454
8
66
101

Oh, you are faaast! Thanks a lot! :-) – Dr.Kameleon Nov 06 '14 at 08:29
So your issue is with the white spacing below the footer? – Stijn Geukens Nov 06 '14 at 08:51
Well, I guess that's a nice way to put it. In any case, there must be no visible space below the footer. – Dr.Kameleon Nov 06 '14 at 08:54
Just tried (via safari console) your updated solution to the http://osxpeppermint.com/category/themes page. However, the footer is still not moving to the bottom. Have a look: http://i58.tinypic.com/24103z5.png – Dr.Kameleon Nov 06 '14 at 09:01
Indeed, I forgot to mention that height of the html must be 100%. – Stijn Geukens Nov 06 '14 at 09:46

score 1 · Answer 2 · answered Nov 06 '14 at 08:26

1

Change

#footer {
position: absolute;
...

to

#footer {
position: fixed;
...

answered Nov 06 '14 at 08:26

Heavy

1,861
14
25

Use `bottom:-45px;` then. – Heavy Nov 06 '14 at 11:01

Vanitas · Answer 3 · 2014-11-06T08:54:09.383

1

In order to make something stick it should have a fixed position in your CSS.

You can find more about that here: http://www.w3schools.com/css/css_positioning.asp

Make sure your footer and all divs surrounding it are also set to fixed.

EDIT:

If you want your footer to appear only at the very bottom set the margin-bottom of your footer to 0px like this:

#footer {

    margin-bottom: 0px;

}

edited Nov 06 '14 at 08:54

answered Nov 06 '14 at 08:26

Vanitas

865
1
7
19

score 1 · Answer 4 · answered Nov 06 '14 at 08:28

Try this:

#footer {
    background: none repeat scroll 0 0 #ddd;
    border-top: 1px solid #aaa;
    bottom: 0;
    color: #666;
    font-family: "Helvetica Neue",Helvetica,arial,freesans,clean;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: fixed;
    width: 100%;
}

Just changed the position to fixed.

score 1 · Answer 5 · answered Nov 06 '14 at 08:29

1

You need position fixed with bottom:0

 #footer {
position: fixed;
bottom:0;
}

answered Nov 06 '14 at 08:29

Radek

43
5

score 1 · Accepted Answer · answered Nov 06 '14 at 09:39

1

I am amazed no one has still managed to answer your question correctly, since you've explained it so clearly.

This is how you do it using only css. Let's say this is your html markup:

<div class="wrapper">
     <p>Your website content here.</p>
</div>

<div class="footer">
     <p>Copyright (c) 2008</p>
</div>

The css should look like:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    /* equal to footer height: */
    margin-bottom: -140px;
 }

.footer {
    height: 140px;
}

Link: http://css-tricks.com/snippets/css/sticky-footer/

answered Nov 06 '14 at 09:39

Hassan Ahmed

405
3
9

Thanks a lot my friend. Yes your answer is by far the most complete (that's what I wanted basically). One more question: Please have a look at this page (http://osxpeppermint.com/category/themes). Why does the footer appear like 10px BELOW the page when the page loads? – Dr.Kameleon Nov 06 '14 at 09:58
1

In #main css: insead of **margin-top: 20px**, try using **padding-top: 20px;** – Hassan Ahmed Nov 06 '14 at 10:17
Hmm... Unfortunately I've tried that. And it doesn't seem to be working as I want it to... – Dr.Kameleon Nov 06 '14 at 10:19
Strange. This fixed the problem when I tried it online using Chome Developer Tools. What problem are you facing? – Hassan Ahmed Nov 06 '14 at 10:26
AWESOME. It worked!! I've been banging my head against the wall for sooooo long! Thanks a lot! :-) – Dr.Kameleon Nov 06 '14 at 10:33
1

Yayy!! Finally had my first accepted answer. You're welcome :) – Hassan Ahmed Nov 06 '14 at 10:35
2

You're great. I'm sure you'll get many more accepted answers! ;-) – Dr.Kameleon Nov 06 '14 at 10:37

score 1 · Answer 7 · edited Jun 20 '20 at 09:12

Actually, there are couple of methods to have a sticky footer at the bottom of the page. It seems you are using Matthew James Taylor's method, but there are coupe of mistakes within your code.

Assuming the given markup:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="main"></div>
    <div id="footer"></div>
</body>

You could follow the steps below to fix the issues and achieve the sticky footer:

<html> should have an explicit height of 100%.
<body> should have:
1. A min-height of 100%.
2. Relative positioning. i.e. position: relative.
3. A bottom padding as the height of the sticky footer.
#main should have a top padding as the height of the fixed header (up to you).
#footer should be positioned absolutely at the bottom - position: absolute; bottom: 0;.

Finally, set box-sizing: border-box; to all elements * {...} to force the browser to calculate the size of boxes including borders and padding.

Getting all together - Example

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 45px; /* height of the footer */
}

.navbar {
  height: 30px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

#main {
  padding-top: 30px; /* height of the fixed positioned header */
}

#footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45px;
}

score 0 · Answer 8 · answered Nov 06 '14 at 08:28

0

sticky footers are the easiest things: DEMO

footer{
    width:100%;
    height:50px;
    background-color:black;
    position:fixed;
    top:100%;
    left:0;
    margin-top:-50px;
}

answered Nov 06 '14 at 08:28

Amin Jafari

7,157
2
18
43

Leonidas · Answer 9 · 2014-11-06T09:01:15.023

In order to undersand CSS better you should understand how the "position" value works. The default value of all elements' in a html site is:

position:static;

For your own problem now the position:fixed is your solution but dont just use it and learn nothing by it. You can easily experiment with position values to see how they work on the html document.

For example, with position absolute at first and adding a animated class with position fixed onscroll will give you a very nice scrolling effect.

You can check this very detailed article: https://developer.mozilla.org/en-US/docs/Web/CSS/position . For the end i give you the answer:

   #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/* UPDATE

The sticky footer effect cannot be accomplished with pure CSS. The problem is that you need a function to measure your window's height and giving the footer the correct margin from the top.
To accomplish that you can use this snippet of jQuery(hopefully you have jQuery installed):

$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});

Have a look at my recent update please. `fixed` does not exactly do what I need. — Dr.Kameleon, Nov 06 '14 at 08:43
I'm more than 100% sure that the more-knowledgeable than me in CSS would very much disagree with you in that there is not CSS-only solution to that. In fact, I have done in the past, and I had done it for this very website (however, I must have tweaked something which messed the whole thing up). — Dr.Kameleon, Nov 06 '14 at 09:03

Painkiller · Answer 10 · 2014-11-06T09:35:52.860

0

Can you use javascript? If so then you can run this javascript in the end of a page or in timeout:

EDIT (i am not forcing to use javascript, there are great CSS answers also :)

var setPosition = function(){
    var foot = document.getElementById('gridContainer2');
    foot.style.position = "relative";
    if((foot.offsetTop + foot.offsetHeight) >= window.innerHeight){
        foot.style.position = "fixed";
    }
    else{
        foot.style.position = "relative"; //or whatever you wish
    }
}
setTimeout(function(){
    setPosition();
    window.onresize = function(){setPosition();};
},10);

edited Nov 06 '14 at 09:35

answered Nov 06 '14 at 08:54

Painkiller

109
1
1
10

And what if the user resizes the window? Would I have to attach this to a window resize event? Sounds rather too much, doesn't it? – Dr.Kameleon Nov 06 '14 at 08:56

Issue with sticky footer at the bottom of the page

10 Answers10

Getting all together - Example