Safari: единицы VH, примененные к родительскому элементу, не допускают 100% высоты в дочерних элементах?

Question

У меня очень простая ситуация, когда я хочу установить элемент контейнера в 80vh а затем иметь внутренний div, чтобы быть 100% этой высоты. В Chrome это будет правильно отображаться, однако в Safari внутренний элемент не имеет 100% 80vh рост.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
}

.inner {
    height: 100%;
    background-color: blue;
}

Вот скрипка, показывающая эту проблему: http://jsfiddle.net/neilff/24hZQ/

В Chrome элемент синий, в Safari - красный. Есть ли решение этой проблемы без применения 80vh на высоту .inner DIV?

Answer 1

Это известная ошибка с vh а также vw в сафари. Вы можете исправить это, установив height: inherit на внутреннем элементе:

.inner {
    height: inherit;
}

http://jsfiddle.net/24hZQ/47/

Answer 2

Вам нужно будет установить position: absolute; к .inner элемент.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
    position: relative;
}

.inner {
    height: 100%;
    background-color: blue;
    position: absolute;
    width: 100%;
}   

Answer 3

Вы можете добиться этого с помощью flexbox (протестировано в Safari 7.0.6, iOS 7 и iOS 8.0 simulator) -

http://jsfiddle.net/clintioo/zkmnomab/

.container {
    background-color: red;
    width: 100%;
    height: 80vh;  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.inner {
    -ms-flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1.0;
    flex: 1;
    background-color: blue;
}