CSS layout for vertical stacked divs to use 100% of available height

I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:

Reading the diagrams from top to bottom, this is the scenario:

1. both divs take up 50% of available height as this is sufficient to contain their content (this is the default).

2. there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.

开发者_Python百科

3. reverse situation of (2).

4. both divs must expand to fit their content. Containing div must expand to accomadate.

I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.

Is there a better CSS solution to this without using a table?

I cannot use JavaScript and solution must work in all browsers... including IE6 :( .

This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.

You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/

Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)

Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.

In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.

For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.

You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module

In the meanwhile, you're going to have to use a Javascript solution.

My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.

You could fake it using a 100% height wrapping div and a white border like so:

http://jsfiddle.net/cBV88/2/

You can also remove the fixed height and it will still work.

SuperStretch might get you part of the way there.