Question

我试图弄清楚为什么Safari不会将其父级的max-height属性读作高度。 Chrome和Firefox都会正确读取它，但Safari似乎忽略了父级的最大高度，而是抓住了页面的全高。

你可以看到它here

CSS：

body, html {
    height: 100%;
    margin: 0;
}
div {
    height: 100%;
    max-height: 300px;
    width: 100px;
}
div span {
    background: #f0f;
    display: block;
    height: 100%;
}

标记：

<div>
    <span></span>
</div>

我在OSX 10.8.5上使用Safari 6.0.5。

Answer 1

由于Webkit中报告的错误，发生此问题：

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

现在看来这对Chrome来说似乎是固定的，但不适用于Safari。

对我有用的唯一非JavaScript解决方法是在父元素上使用绝对定位：

div {     
    position: absolute;
}

<强>演示

Try before buy

Answer 2

如果父元素使用flexbox属性，Safari上会出现类似的问题 - 容器不会占据100％的高度。另一个解决方案（除了position: absolute;）将使用vh（视口高度）单位：

div {
 height: 100vh;
}

Safari高度100％元素位于max-height元素内

2 个答案: