css - 视口(viewport)单元 div 内的百分比高度在 Safari 中不起作用

Question

我有一个基于使用 vh 单位的视口(viewport)的 100% 高的 div:

div {
    height:100vh;
    background:red;
}

在这个 100% 高的 div 中，我需要一个 50% 高的 div:

span {
    display:block;
    height:50%;
    background:blue;
}

在 Chrome 中工作正常，在 Safari 中不太好。认为它应该工作，但只有当我为父 div 高度使用固定值时才工作。它也不适用于最新的 iOS 7.1 的移动 safari

演示:http://jsfiddle.net/qQ8dm/

在固定高度下工作:http://jsfiddle.net/xbBcy/ & http://jsfiddle.net/xbBcy/1/

我知道，我可以为父 div 使用 50vh，但如果我只使用一次 vh 单元，简单的百分比高度可能更适合跨浏览器兼容性，更容易创建后备。

Answer 1

尝试将此添加到您的样式表中:

html, body{
    height: 100%;
    width: 100%;
}