具有min-height属性的父级的子div的继承高度

  • Z时代
  • 2024-01-10
  • 分类：问答

很抱歉，这是一个旧问题还是一个已知问题，但是我无法在线找到答案。如果我有代码

<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内有多个div的情况下，min-height:inherit每个子div

都需要这样做。还有更优雅的解决方案吗？

回答：

是的，这是一个WebKit错误，错误26559。

height``%相对于包含块的指定height属性计算静态或相对定位元素上的in ，而不是考虑min-height和考虑max-

height到所计算的高度。宽度不会发生相同的情况。

您可以从CSS 2.1中看出这是从哪里来的，它指出必须明确设置包含块的高度%才能正常工作。但是并没有明确说明“显式”是什么意思！浏览器认为这意味着height必须将属性设置为非自动值，这很公平，只是现在height还不够。其他浏览器允许min-height/ max-height影响要使用的高度，但不允许其表示“显式”。WebKit通过 仅

height用于计算而不是最小/最大来进一步发展（并且这绝对不是规范要求的）。

作为解决方法，您可以尝试不影响绝对定位。相对位置外部div，绝对位置内部left: 0; top: 0; width: 100%; height:

100%。

以上是 具有min-height属性的父级的子div的继承高度 的全部内容， 来源链接： utcz.com/qa/423411.html

回到顶部