How to keep a HTML div element stick to the bottom of the web page?
Posted on 2009-12-28
I want to include a div element on my aspx .NET web page that remains always at the bottom of the page irrespective of the size of the contents. If the contents are larger than the viewable portion of the browser, then the bottom bar should be visible only when user scrolls the page to the bottom. If the contents are shorter than the view port, then the bottom bar should still stick to the bottom of the page (It should not hang around from the content above).
I tried several techniques that are suggested all around the internet, the following being the most popular one:
<!-- Page contents -->
<div id="bottombar" CssClass="bottomBar">
The bottom bar is being displayed correctly at the bottom of the page, if there is enough content on the page to fill the view port. The min-height attribute is supposed to take care of the case where the contents do not occupy the whole view port. But somehow it is not working. I've tried different combinations of the same technique, but in vain. I'd really appreciate if somebody could point out what is wrong with this code.
NOTE: Please note the above code is not working in Firefox also. I am aware of the IE6 hack to make this work, but that is to be taken care of after getting the basics right.