Floating DIV at the bottom of the page (it should not scroll after the DIV footer)

Question

div{ position:fixed; bottom:0px; height:20px; } 

in the code above explains that it will always support the DIV below. but I need to avoid scrolling after the footer. I wanted to set the border for a floating div.

Can you help me?

[Edited] Please refer to this and help me! http://jsfiddle.net/umarfaruk/y9cWf/ I added my example. how can i stop the floating div when we touch the footer. (I meant floating should stop scrolling in front of the footer)

UPDATED:

Thanks guys. I found a solution at http://jsfiddle.net/PnUmM/1 Actually thanks @Gatekeeper :)

Answer 1

As Giberno wrote in his commentary, use an empty div to fill in the space occupied by the footer (and thus prevent the last line (s) of text falling and hidden by the footer. Nice and easy: no scripts needed!

 div#footer{ position:fixed; bottom:0px; height:20px; } div#empty-space{ height:20px; /* Same height as footer */ } 

And HTML:

 Put your page here ... <div id="empty-space"/> <div id="footer">footer</div> 

See this jsFiddle for a working example.

Answer 2

The easiest way to do this is to give the body lower pad of the same height as the fixed element. Thus, you can always scroll through any content.

 #body { padding-bottom: 50px; } #fixed { height: 50px; position: fixed; width: 100%; } 

here is the violin

Answer 3

write on your page or style sheet to avoid the scrollbar after f

 * { margin: 0 auto; }