Comments on: Sticky Footer at Bottom of Page using JQuery

By: tbone

tbone — Mon, 30 May 2011 18:56:38 +0000

very nice *little* jquery script.

By: Saurabh Gupta

Saurabh Gupta — Thu, 17 Feb 2011 08:59:12 +0000

Thanks..!! Nice… work

By: DanielP

DanielP — Tue, 19 Oct 2010 12:06:28 +0000

Here is the division structure for the script above:


		
		<
			Your content here
			
		/div>

By: DanielP

DanielP — Sun, 17 Oct 2010 14:15:30 +0000

This is not working with all browsers. The best way is to have a high level div wrapping everything:

And then the script in the header goes like this:

jQuery(document).ready(function() {
positionFooter();
function positionFooter(){
var page_height = jQuery(“#toplevel”).height();
var window_height = jQuery(window).height();
var difference = window_height – page_height;
if (difference < 0)
difference = 0;

jQuery("#content-pad").css({
height: difference + "px"
})

}

});

Voilà

By: Shaz3e

Shaz3e — Fri, 10 Sep 2010 19:42:54 +0000

Well thanx ChirsB for you reply I got the solutions now, actually there was a mistake in my HTML but I corrected it thanx anyway

Cheers

By: Shaz3e

Shaz3e — Fri, 10 Sep 2010 19:38:03 +0000

@ ChrisB

Thanx for the reply, here is the link of the page is being developed,

http://dev.diligentcreators.com/cms/index.php?page=Support+%26%23187%3B+Solutions

hope you may help me in this …

By: ChrisB

ChrisB — Fri, 10 Sep 2010 16:09:20 +0000

Your css looks right. does you html look like this...


   Your footer content

You can go to mcguirebuildersinc.com and I'm using the sticky footer there. Feel free to send me a link to the webpage you are working on and I can take a look at it.

By: Shaz3e

Shaz3e — Fri, 10 Sep 2010 15:50:39 +0000

I am putting your script on my page but seems like not working any more pls do let me know if I am doing wrong my footer class css looks like this:
.footer {
height: 228px;
background-color: #c1c3c8;
background-image: url(../_img/footerbg.gif);
background-repeat: repeat-x;
}

By: Michael

Michael — Tue, 25 May 2010 15:02:23 +0000

Just stumbled across this – brilliant! Many thanks. How would you tweak it to work as Peter says previously – ie with the padding at the bottom rather than the top? I’ve been monkeying around with the script but I don’t know what I’m doing. Thanks, Mike.

By: Peter

Peter — Mon, 03 May 2010 07:59:09 +0000

Thank you very much! Modified it to expand the div above the footer to add bottom-padding instead, and works perfectly. Thanks!