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

Question

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

你可以在这里看到它

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中报告的错误,会发生此问题:

错误26559 - 当块的高度由最小高度/最大高度确定时,百分比高度的孩子的大小不正确

对于Chrome来说这似乎已经修复了,但对于Safari来说却没有.

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

div {     
    position: absolute;
}

演示

买前先试试

Answer 2

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

div {
 height: 100vh;
}