CSS3 100vh не является постоянным в мобильном браузере ⇐ CSS

[Гость]

У меня очень странная проблема... во всех браузерах и мобильных версиях я сталкивался с таким поведением:

• во всех браузерах есть верхнее меню при загрузке страницы (например, отображающее адресную строку), которое сдвигается вверх, когда вы начинаете прокручивать страницу.
• 100vh иногда рассчитывается только для видимая часть области просмотра, поэтому, когда панель браузера сдвигается вверх на 100vh, увеличивается (в пикселях)
• все макеты перерисовываются и корректируются, поскольку размеры изменились.
• Плохое влияние на взаимодействие с пользователем

Как избежать этой проблемы? Когда я впервые услышал о высоте окна просмотра, я был взволнован и подумал, что могу использовать его для блоков фиксированной высоты вместо использования javascript, но теперь я думаю, что единственный способ сделать это на самом деле - это javascript с некоторым событием изменения размера...

Проблему можно увидеть на: образец сайта

Может ли кто-нибудь помочь мне/предложить решение CSS?



простой тестовый код:

Код: Выделить всё

/* maybe i can track the issue whe it occours... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})

Код: Выделить всё

*{ margin:0; padding:0; }

/*
this is the box which should keep constant the height...
min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
min-height:100vh;
position:relative;
}

.vhbox .t{
display:table;
position:relative;
width:100%;
height:100vh;
}

.vhbox .c{
height:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}

Код: Выделить всё

this div height should be 100% of viewport and keep this height when scrolling page







this div height should be 100% of viewport and keep this height when scrolling page

Подробнее здесь: https://stackoverflow.com/questions/371 ... le-browser