Full-height CSS layout, with multiple columns

Question

I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.

This is the desired layout

Answer 1

Here's what I ended up using, using this technique of high value for padding-bottom, with an equal but inverted value in margin-bottom - then you set overflow:hidden on the div enclosing that huge margin.

It's rather hackish, but it works! I now have a full-height, a single em-defined width, and a full-height background-image down each side! There's not much extra markup (a container div, a div for each of the three columns)

    
    


    

        

                           
        
        

                    Put lots of text here