Connecting Tech Pros Worldwide Forums | Help | Site Map

Positioning footer at bottom of screen

Newbie
 
Join Date: May 2007
Posts: 2
#1: Aug 15 '07
Hi All,

I am trying to position the footer div in my page to stay at the bottom of the screen when the content does not reach or exceed the height of the browser window. I am able to position it absolutely by adding:

Expand|Select|Wrap|Line Numbers
  1. div#footer {
  2. ....
  3. position: absolute;
  4. bottom: 0; 
  5. }
  6.  
However when there is scrollable content, the footer sticks on top of the text and scrolls with it (which I expected).

Can anyone tell me a way I can modify this so that the footer will always stay at the end of the text?

The layout im using is:

Expand|Select|Wrap|Line Numbers
  1. <div id="wrapper">
  2. <div id="header"></div>
  3. <div id="pagecontent"></div>
  4. <div id="footer"></div>
  5. </div>
Thanks

drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,566
#2: Aug 15 '07

re: Positioning footer at bottom of screen


Please see the example in this thread.
Reply