Extend footer (background color) until end of viewport

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
magicpio
Forum Members
Forum Members
Posts: 30
Joined: Mon Dec 05, 2005 7:54 pm

Extend footer (background color) until end of viewport

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
Post Reply

Return to “Layout and Design (CSS & HTML)”