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

vote vote

92

This is precisely what position: fixed was designed for:

#footer {     position: fixed;     bottom: 0;     width: 100%; } 

Here's the fiddle: http://jsfiddle.net/uw8f9/

vote vote

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/

vote vote

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

vote vote

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.

vote vote

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">. 

see http://caniuse.com/#search=position

Top 3 video Explaining css - Make div stay at bottom of page's content all the time even when there are scrollbars

Related QUESTION?