Page 1 of 1

Extend footer (background color) until end of viewport

Posted: Tue May 30, 2006 2:16 pm
by magicpio
I´m not a CSS/(X)HTML guru - yet  ;)

My page has a header with green background and height 100 pixel, a content section with white bg and height variable,
and a footer again with green bg and height minimum 100 px.

Assuming a viewport (browser window height) of 600 pixel as example, I can have basically two situations:
a) Content height = 300px
Desired result: Footer bg color shall extend until end of viewport (i.e. 600-100-300=200px height) and no vertical scrollbar shall appear.

b) Content height = 900px
Desired result: Footer shall have height 100px (i.e. total page height will be 100+900+100=1100px) and a vertical scrollbar shall appear,
since viewport height is only 600px.

The basic task is for case a) , to have the same bg color (green) all the way down to the bottom of the browser window as the bg color of header and footer.

For certain reasons I cannot just give the whole a green bg and the content section a white one.
I cannot find a working solution for this problem and appreciate any ideas!

Thanks.
Pio

Re: Extend footer (background color) until end of viewport

Posted: Tue May 30, 2006 3:14 pm
by Dr.CSS
do you have pagewrapper wrapping everything at the same width as all your 's if so you may be able to set it at height:100% with no bottom margin or padding and set the background color of it to green and it may just extend to the bottom of the page no matter what size the viewport is...