CODEWITHSUNDEEP
htmlcssjsfiddle
rjmcb
rjmcb

Reputation: 3745

Inherit height of parent doesn't work

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/

Upvotes: 17

Views: 46728

Answers (4)

user3139655
user3139655

Reputation: 1

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.

Upvotes: 0

Ben
Ben

Reputation: 11502

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.)

Upvotes: 1

Jesse
Jesse

Reputation: 5074

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.

Upvotes: 4

Thomas Jones
Thomas Jones

Reputation: 4962

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.

Upvotes: 28

Related Questions