Inherit height of parent doesn't work

Question

I wanted the .cols inside .row to inherit .row's height and make the .cols be fixed inside the .row. Here's the fiddle.. http://jsfiddle.net/Hhf8R/

My idea is to make it like a table but using divs. like this : http://jsfiddle.net/hhUtb/

Answer 1

in order for divs to be 100% of the height of their parent, the parent has to have a defined height.

the browser can't calculate 100%(or inherit) of something that hasn't been fully rendered yet.

Answer 2

You need to set the height CSS property on the parent if you want the child to inherit it.

If you're wanting your height to be dynamic based on the content, that is something that isn't trivially achieved with CSS unfortunately. There are a couple different methods; this one seems like a good place to start.