Question

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

<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上，则min-height:inherit有效，但如果在一个div内有多个div，则每个子div需要{{1}}。还有更优雅的解决方案吗？

Answer 1

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

静态或相对定位元素的height中的{p> %是相对于包含块的陈述height属性计算的，而不是计算的高度min-height和考虑max-height。宽度也不会出现同样的情况。

您可以在CSS 2.1中查看其来源，其中指出必须明确设置包含块的高度才能使%起作用。但是没有明确说明“明确”意味着什么！浏览器认为height属性必须设置为非自动值，这是公平的，除了height现在并不是所有高度都是如此。其他浏览器允许min-height / max-height影响要使用的高度，但不允许它表示“显式”。 WebKit通过在calcation中仅使用 height而不是min / max来进一步（这绝对不是规范），

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

Answer 2

我认为这只是两个浏览器的默认CSS之间的差异。试试这个：

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

它对我有用。

Answer 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）：

包含此关键字指定背景图片应为   缩小到尽可能大，同时确保其尺寸   小于或等于相应的尺寸   背景定位区。

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

一个缺点是：图片将被放大以填充父级空间。

Answer 4

我在Chrome中的空div上遇到了min-height问题（OSX 10.6）。我不知道它是否是相同的bug行为，但我通过更改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;

希望有所帮助。

Answer 5

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

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

<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：绝对属性是必须的。

是的，它看起来很糟糕，但是完成了工作：）

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

5 个答案: