css - 视口单元 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 的移动 Safari

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

适用于固定高度： http: //jsfiddle.net/xbBcy/ & http://jsfiddle.net/xbBcy/1/

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

Answer 1

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

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