ansaurus

Question

The inherited height of a child div from a parent with a min-height attribute

Answer 1

+1 A:

Hi,

I think it is only the differences between the two browser's default CSS. Try this:

<style>
    div {min-height: inherit;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>

It works for me.

Adam Wallner 2010-09-27 23:25:42

@Adam Wallner - Yep that'll do the trick. If you're using span's and other tags you can use `#div1 * {min-height: inherit}` instead. Thank for the answer - it's a better fix than mine was!

PhilI 2010-09-30 21:35:48

Answer 2

+1 A:

Yes, this is a WebKit bug, bug 26559.

height in % on static-or-relative-positioned elements is calculated relative to the containing block's stated height property, instead of the calculated height taking min-height and max-height into account. The same does not occur for width.

You can sort of see where this comes from in CSS 2.1 which states that the height of a containing block must be explicitly set in order for % to work. But it's not explicitly stated what ‘explicitly’ means! Browsers have taken this to mean that the height property must be set to a non-auto value, which is fair enough except that height isn't all there is to height now. Other browsers allow min-height/max-height to affect the height to be used, but don't allow it to mean ‘explicit’. WebKit goes farther (and this definitely isn't mandated by spec) by using only height in the calcation and not min/max.

As a workaround, you could try absolute positioning, which isn't affected. Relative-position the outer div, absolute-position the inner at left: 0; top: 0; width: 100%; height: 100%.

bobince 2010-09-27 23:48:01

Thanks for the answer, it's the first time I've found firefox and webkit's rendering to differ and it was driving me up the wall.

PhilI 2010-09-30 21:38:09

ansaurus

tags:

views:

answers:

The inherited height of a child div from a parent with a min-height attribute

related questions