CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dr.Kameleon
Dr.Kameleon

Reputation: 22810

Issue with sticky footer at the bottom of the page

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.

Upvotes: 2

Views: 1279

Answers (10)

Hashem Qolami
Hashem Qolami

Reputation: 99474

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:

  1. <html> should have an explicit height of 100%.
  2. <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.
  3. #main should have a top padding as the height of the fixed header (up to you).
  4. #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;
}

Upvotes: 1

Stijn Geukens
Stijn Geukens

Reputation: 15628

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

Upvotes: 2

Hassan Ahmed
Hassan Ahmed

Reputation: 405

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/

Upvotes: 1

Painkiller
Painkiller

Reputation: 109

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

Upvotes: 0

Leonidas
Leonidas

Reputation: 566

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

Upvotes: 0

Vanitas
Vanitas

Reputation: 903

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;

}

Upvotes: 1

Radek
Radek

Reputation: 43

You need position fixed with bottom:0

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

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

sticky footers are the easiest things: DEMO

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

Upvotes: 0

Captain Planet
Captain Planet

Reputation: 408

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.

Upvotes: 1

Heavy
Heavy

Reputation: 1900

Change 

#footer {
position: absolute;
...

to

#footer {
position: fixed;
...

Upvotes: 1

Related Questions