How to make a div always at the bottom of the page when scrolling

Question

I use the code below to make the DIV always at the bottom of the page when scrolling. But this does not work and continues to increase the page height.

var LSscrollingDiv = $("#LightSwitchMenuIt"); $(window).scroll(function(){ LSscrollingDiv .stop() .animate({"marginTop": ($(window).scrollTop() + $(window).height()) + "px"}, "slow" ); }); 

Please help me with this.

Answer 1

Why not use straight CSS?

 div.foo { position: fixed; bottom: 0px; } 

Demo

Cm:

• https://developer.mozilla.org/de/CSS/position

Answer 2

This might be a simple CSS problem ... you can put the DIV in a fixed position at the bottom of the viewport and always be there when scrolling, without Javascript

 position: fixed; bottom: 0px; 

Answer 3

You can use css

 position: fixed; bottom: 0; 

to avoid having to do this in javascript if you want.

http://jsfiddle.net/A8BGJ/ is a simple demo.

Answer 4

It can also help set the width as inheritance.

 #div { position: fixed; bottom: 0; width: inherit; } 

Answer 5

Use the following rules:

 div { position: fixed; bottom: 0; } 

You can also use this technique in any parent block element.