How to implement a vertical liquid layout with divs

Question

My website has three components:

• a fixed height header that spans the width of the screen
• a fixed width nav under the header on the left that spans the remaining height of the screen
• a content area to the right of the nav that takes up any remaining space.

I understand how to implement the horizontal aspect of the liquid layout so that the nav remains fixed while the content area takes up remaining width, but I don't understand how to implement the vertical aspect of liquid layout so that both the nav and content area take up at least the remainder of the height and at most the height of their content (assuming that this is taller than the screen less the header height).

Possible with divs?

Answer 1

Yes, it's possible. Take a look at Ryan Fait's sticky footer, and my previous answer to a similar question.

Answer 2

Here you go: http://jsfiddle.net/HcBKV/embedded/result/

There are generally two ways to go about it. One is with setting the height and width to 100%, the other is with stretching by means of position absolute and making it a fixed length from each side.