Высота в процентах внутри блока просмотра области просмотра не будет работать в Safari

Question

У меня есть div высотой 100%, основанный на области просмотра с использованием модуля vh:

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

Внутри этого дивана высотой 100% мне нужен дивид высотой 50%:

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

Работает нормально в Chrome, не так хорошо в Safari. Думаю, это должно работать, но работает только тогда, когда я использую фиксированное значение для родительской высоты div. Это не работает в мобильном сафари тоже с последней iOS 7.1

Демо: http://jsfiddle.net/qQ8dm/

Работает с фиксированной высотой: http://jsfiddle.net/xbBcy/ & http://jsfiddle.net/xbBcy/1/

Я знаю, что я мог бы использовать 50vh для родительского div, но просто процентная высота могла бы быть лучше для кроссбраузерной совместимости, легче создать запасной вариант, если бы я использовал vh unit только один раз.

Answer 1

Попробуйте добавить это в вашу таблицу стилей:

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