Menu
I'm sorry if this is an old issue or a known problem, but I haven't been able to find an answer online. If I have the code
<style>
html, body { height: 100%; width: 100%;}
#div1 {height:50%; min-height:200px;background-color:red;}
#div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
Then in firefox the black inner div shrinks as the screen shrinks and stops at 200px height. However in a webkit browser the red outer div stops but the inner div continue to shrink as if it was in a parent div without the min-height attribute.
Is there an easy fix to bring the webkit version into line with the firefox rendering? A min-height:inherit works if placed on the inner div, but in the case of many divs within one this would require min-height:inherit on each child div. Are there any more elegant solutions?
620
height: 100% will match the height of the element's parent, regardless of the parent's height value. height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50% , then the child will also be 50% of the height of it's parent.
Example 2: The second way to achieve this by using align-items property in the parent div to 'stretch'. It makes every . child-div 100% height of it's parent height.
The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height .
Definition and UsageIf the content is smaller than the minimum height, the minimum height will be applied. If the content is larger than the minimum height, the min-height property has no effect. Note: This prevents the value of the height property from becoming smaller than min-height .
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%.
156
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
