
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