Inherit height of parent doesn't work

html css jsfiddle
rjmcb picture rjmcb · May 8, 2012 · Viewed 25.2k times · Source

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

Thomas Jones picture Thomas Jones · May 8, 2012

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.

Related questions

Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Div Height in Percentage

Possible Duplicate: Percentage Height HTML 5/CSS This needs to be a simple one but I why the height specified in percentage for a div is not apply to it. For example: <div class="container"> adsf </div> …

Read More
CSS ONLY Animate Draw Circle with border-radius and transparent background

I am trying to draw a circle with border-radius, and animate it. I can do this, but what i can't do is overlay elements and set the circles background to transparent, without unhiding the mask. I am not able to …

Read More