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

【问题标题】：The inherited height of a child div from a parent with a min-height attribute从具有 min-height 属性的父级继承的子 div 的高度
【发布时间】：2015-05-13 10:21:57
【问题描述】：

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

<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，则每个子 div 上都需要min-height:inherit。有没有更优雅的解决方案？

【问题讨论】：

标签： cross-browser css

【解决方案1】：

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

% 在静态或相对定位元素上的height 是相对于包含块声明的height 属性计算的，而不是考虑到min-height 和max-height 的计算高度。宽度不会发生同样的情况。

您可以在CSS 2.1 中看到它的来源，它指出必须明确设置包含块的高度才能使% 工作。但是没有明确说明“明确”是什么意思！浏览器认为这意味着必须将height 属性设置为非自动值，这很公平，只是height 并不是现在的高度。其他浏览器允许min-height/max-height 影响要使用的高度，但不允许它表示“显式”。通过在计算中使用 only height 而不是 min/max，WebKit 走得更远（这绝对不是规范要求的）。

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

【讨论】：

感谢您的回答，这是我第一次发现 firefox 和 webkit 的渲染不同，这让我很难受。
+1 用于提及 CSS 规范；这为我解决了问题。有趣的是，如果您将孩子的身高指定为min-height: 100% 而不是height: 100%，它可以工作——但仅限于Opera。在我看来，根据规范，这应该是正确的行为，但并非如此。也许有人应该针对规范提交错误:)

【解决方案2】：

我认为这只是两个浏览器默认 CSS 的区别。试试这个：

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

它对我有用。

【讨论】：

是的，这就行了。如果您使用跨度和其他标签，您可以使用 #div1 * {min-height: inherit} 代替。感谢您的回答 - 这是一个比我更好的解决方案！

【解决方案3】：

我们的项目需要图像垂直和水平居中。我们需要根据屏幕大小调整图像。我发现将图像作为背景可以解决问题：

<style>
    .parent {
        height: 100%;
    }
    .image {
        height: 100%;
        background: url('/path/to/your/image') no-repeat 50% 50%;
        -o-background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        background-size: contain;
    }
</style>
<div class="parent">
    <div class="image"></div>
</div>

这里50% 50% 使图像水平和垂直居中。而background-size: contain保证背景不超出父级边界（MDN background-size）：

contain 这个关键字指定背景图片应该是缩放到尽可能大，同时确保其尺寸小于或等于相应的尺寸背景定位区域。

这样，父级不需要指定绝对单位。这里 height: 100% 就够了。

一个缺点是：图像会被放大以填充父空间。

【讨论】：

【解决方案4】：

我在 Chrome (OSX 10.6) 中的空 div 上遇到了最小高度问题。我不知道这是否是相同的错误行为，但我通过更改 box-sizing 属性找到了我的解决方案。

不适用于 Chrome Mac：

box-sizing:border-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

在 Chrome Mac 中工作：

box-sizing:content-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

希望对您有所帮助。

【讨论】：

【解决方案5】：

我想发布我的解决方案，因为我花了一段时间才使我的代码工作，也许有人会发现这很有用，尽管这是一个老话题......

我有一个类似的问题。图像从父 flex-child 块溢出。这种情况只发生在 Chrome 和 Opera（webkit 浏览器）中，trident 和 gecko 足够聪明来应对这种情况。我在这里尝试了一些关于堆栈溢出的解决方案，但没有一个提供直接的解决方案，因此我通过在上述图像和父级之间添加另一个容器层来交叉发明一种解决方法。在开篇文章中介绍的情况下，它看起来像：

<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red; position: relative;}
    #div_fix {position: absolute; height: 100%; width: 100%;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div_fix"><div id="div2"></div></div></div>
</body>

这样做是创建一个容器 (#div_fix)，它接收静态高度和宽度，然后可以在 webkit 中正确使用以计算 #div2 中的正确高度。请注意 position:relative 和 position:absolute 属性是必须的。

是的，它看起来很糟糕，但可以完成工作:)

【讨论】：