Safari高度100%元素在最大高度元素内

我试图弄明白为什么Safari不会将其父对象的max height属性作为高度来读取。Chrome和Firefox都能正确阅读，但Safari似乎忽略了父页面的最大高度，而是抓住了页面的完整高度

你可以看到

CSS:

标记：

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

---

我正在OSX 10.8.5上使用Safari 6.0.5。

出现此问题的原因是Webkit中报告了一个错误：

这似乎是固定的铬现在，但不是为狩猎

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

div {     
    position: absolute;
}

演示

---

如果父元素使用

flexbox

属性，Safari上会出现类似问题-容器不会占据100%的高度。 另一种解决方案（除了

位置：绝对；

）是使用

vh

（视口高度）单位：

---

这似乎是有责任的。这里还有一个关于它的例子。唯一对我有效的解决方案是添加

div{position:absolute；}

，@insertusernamehere-Perfect。我仍然讨厌旅行；）如果你把它作为一个答案，我会接受它。@insertUserName在这里，但是如果你想在第二个div之后构建两个div呢？获取HTML并复制它，然后将复制的div放在原始div之后。你能看到副本吗？…我花了几个小时寻找这个解决方案。。。工作得很有魅力！绝对定位不起作用，但使用

display:flex

设置div内部的div高度起作用了@谢尔盖·杜博维克这是救命恩人！谢谢

div {     
    position: absolute;
}

div {
 height: 100vh;
}