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

У меня очень простая ситуация, когда я хочу установить элемент контейнера на 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?


css safari viewport-units safari7
person Neil    schedule 03.06.2014    source источник
comment
Слабая поддержка в Safari - caniuse.com/#search=vh Проверьте информацию о проблеме внизу   -  person Paulie_D    schedule 03.06.2014
comment
Я вижу проблемы с iOS7 Safari в списке, но не с рабочим столом. Ошибка указана для блоков VH, если я изменю этот пример на блоки VW, это снова вызовет ту же проблему.   -  person Neil    schedule 03.06.2014
comment
IOS глючит для модулей vh. Вы можете попробовать buggyfill единиц просмотра, но я не рекомендую его без редактирования.   -  person MindlessRanger    schedule 07.09.2014
comment
Эта ошибка исправлена ​​в Safari 8.   -  person Stephan Muller    schedule 24.06.2015

Ответы (3)


arrow_upward
18
arrow_downward

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

.inner {
    height: inherit;
}

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

person Stephan Muller    schedule 11.09.2014
comment
Боже, я люблю StackOverflow! - person Jimbali; 07.04.2016
comment
Я обнаружил, что height: inherit; max-height: 100% помогает с совместимостью с браузерами. - person Jimbali; 07.04.2016

arrow_upward
1
arrow_downward

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

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

.inner {
    height: 100%;
    background-color: blue;
    position: absolute;
    width: 100%;
}
person pstenstrm    schedule 07.09.2014
comment
absolute Не работает. При этом создается двойная прокрутка, и макет становится непропорциональным. - person Seif Sallam; 07.09.2014
comment
@misterManSam Извините, но в моем случае нет. У меня есть список элементов, которые отображаются в виде сетки. Установка ширины и высоты на 100% для внутреннего элемента устанавливает для элемента значение% документа вместо родительского. Вот Gif для моего текущего представления dl.dropboxusercontent.com/u/616034/ vw-issue.gif - person Seif Sallam; 07.09.2014
comment
@SeifSallam - Не вижу гифку. Можете ли вы показать простой пример на скрипке? - person misterManSam; 07.09.2014
comment
@SeifSallam Сам по себе он не должен создавать никакой прокрутки, мне нужно больше информации, чтобы знать, что там происходит. Применены ли какие-либо отступы к элементу .container? - person pstenstrm; 07.09.2014
comment
@pstenstrm Нет, но я использую flexbox в качестве основного внешнего контейнера. Тот, который держит всю сетку. - person Seif Sallam; 07.09.2014

arrow_upward
1
arrow_downward

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

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;
}
person Community    schedule 08.09.2014
comment
Проблема в том, что над текущим контейнером находится внешний контейнер, который является гибким и не имеет высоты. Контейнер подобен элементу ячейки. Я задаю высоту для каждой ячейки. Наконец, inner занимает 100% пространства родительского элемента, так что я могу центрировать элементы внутри. - person Seif Sallam; 08.09.2014