从具有min-height属性的父级继承的子div的高度 [英] The inherited height of a child div from a parent with a min-height attribute
问题描述
很抱歉，如果这是一个旧问题或已知问题，但我无法在线找到答案。如果我有代码
< 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>
然后在firefox中，黑色内部div随着屏幕缩小而缩小，并停止在200px高度。但是在webkit浏览器中，红色外部div停止，但内部div继续收缩，就像它在没有min-height属性的父div中。
容易修复使webkit版本与firefox渲染一致？ min-height：inherit 如果放在内部div，但是在许多div的情况下，这将需要 min-height：inherit 每个子div。有更优雅的解决方案吗？
是的，这是一个WebKit错误， c height 属性计算的，而不是计算的高度 min-height 和 max-height 。对于宽度不会发生同样的情况。
你可以看到 CSS 2.1 ，其中规定必须明确设置包含块的高度，以便％工作。但它没有明确说明明确的意思！浏览器认为这意味着 height 属性必须设置为非自动值，除非 height 现在不是所有的高度。其他浏览器允许 min-height / max-height 影响要使用的高度，但不允许意为显性。在计算中使用 height ，而不是最小/最大值，WebKit越远（这绝对不是spec的强制）。
作为解决方法，您可以尝试绝对定位，这不受影响。相对位置外部div，绝对位置内部 left：0; top：0; width：100％; height：100％。
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?
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%.
这篇关于从具有min-height属性的父级继承的子div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
