safari - 最大高度元素内的 Safari 高度 100% 元素

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 - 当块的高度由 min-height/max-height 确定时，具有百分比高度的子级大小不正确

这似乎现在已针对 Chrome 修复，但不适用于 Safari。

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

div {     
    position: absolute;
}

演示

先试后买

Answer 2

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

div {
 height: 100vh;
}