14

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/

rjmcb
  • 3,595
  • 9
  • 32
  • 46

4 Answers4

25

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.

Thomas Jones
  • 4,892
  • 26
  • 34
  • so you mean i need to set the height of the container? – rjmcb May 08 '12 at 00:42
  • yes, but as jesse said, this is a fairly non-trivial task with CSS alone. unless you have a static height, it's not easy. dynamically grown columns are much more difficult – Thomas Jones May 08 '12 at 00:44
4

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.

Jesse
  • 4,814
  • 1
  • 18
  • 9
1

You need an explicit height on the parent row in order for inherit to have a meaning.

Add a height declaration to your row:

http://jsfiddle.net/LzkgU/

and the floated columns do inherit the parent's height.

(Sidenote: There will be people who tell you that floats can't inherit heights:

CSS - make div's inherit a height

but that ain't necessarily so.)

Community
  • 1
  • 1
Ben
  • 11,082
  • 8
  • 33
  • 47
0

You can fix the height of your content in js by checking changement that could transform your content.

For example, I have an Html Editor that animate a cursor by using setTimeout. While cursor animates, I change the height of my cell if needed.

ᗩИᎠЯƎᗩ
  • 2,122
  • 5
  • 29
  • 41
user3139655
  • 1