视口单元div内的百分比高度在Safari中不起作用

Question

基于使用vh单位的视口，我有一个100％高的div：

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

在这个100％高的div中，我需要一个50％高的div：

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

在Chrome中运行良好，在Safari中效果不佳。认为它应该工作，但只有当我使用父div高度的固定值时才有效。它最近的iOS 7.1还没有在移动游猎中工作

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

使用固定高度：http://jsfiddle.net/xbBcy/＆amp; http://jsfiddle.net/xbBcy/1/

我知道，我可以使用50vh作为父div，但是对于跨浏览器兼容性而言，简单的百分比高度可能更好，如果我只使用vh单位一次，则更容易创建回退。

Answer 1

尝试将其添加到样式表中：

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