This is precisely what position: fixed was designed for:
#footer { position: fixed; bottom: 0; width: 100%; } Here's the fiddle: http://jsfiddle.net/uw8f9/
css - Make div stay at bottom of page's content all the time even when there are scrollbars
ID : 10426
viewed : 27
Tags : csspositioningcss-positionfootercss
Top 5 Answer for css - Make div stay at bottom of page's content all the time even when there are scrollbars
92
90
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
HTML
First you need to wrap your header,footer and #body into a #holder div:
<div id="holder"> <header>.....</header> <div id="body">....</div> <footer>....</footer> </div> CSS
Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
html,body{ height: 100% } #holder{ min-height: 100%; position:relative; } #body{ padding-bottom: 100px; /* height of footer */ } footer{ height: 100px; width:100%; position: absolute; left: 0; bottom: 0; } Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
80
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
html,body { height: 100% } #nonFooter { min-height: 100%; position:relative; /* Firefox */ min-height: -moz-calc(100% - 30px); /* WebKit */ min-height: -webkit-calc(100% - 30px); /* Opera */ min-height: -o-calc(100% - 30px); /* Standard */ min-height: calc(100% - 30px); } #footer { height:30px; margin: 0; clear: both; width:100%; position: relative; } for html layout
<body> <div id="nonFooter">header,middle,left,right,etc</div> <div id="footer"></div> </body> Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
64
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
50
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">.