Title rewritten as: CSS3’s 100vh value is not fixed in mobile browsers
<p>I have a very strange problem... I get this behavior in every browser and mobile version I come across: </p>
<ul>
<li>When a page loads, all browsers have a top menu (e.g. showing the address bar) that slides up when you start scrolling. </li>
<li>Sometimes, 100vh is only calculated on the visible part of the viewport, so when the browser bar slides up, 100vh increases (in pixels)</li>
<li>All layouts will be redrawn and resized because the dimensions have changed</li>
<li>Not good for user experience</li>
</ul>
<p>How to avoid this problem? When I first heard about viewport height I was excited, I thought I could use it instead of using JavaScript to set a fixed height for blocks, but now I think the only way is actually to use JavaScript and some resizing Events...</p>
<p>You can see the problem here: Sample Site</p>
<p>Can anyone help me solve this/provide a CSS solution? </p>
<hr />
<p>Simple test code:</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* Maybe I can track when the problem occurs... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (resized) $('#currenth').css('background:#00c');
})
.resize();
})</pre>
<pre class="brush:css;toolbar:false;">*{ margin:0; padding:0; }
/*
This is a box that should remain the same height...
Use min-height to allow content to exceed the height of the viewport if there is 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;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="background-color:#c00">
<div class="t"><div class="c">
The height of this div should be 100% of the viewport and maintain this height when scrolling the page
<br>
<!-- If the resize event is triggered, this input box will be highlighted -->
<input type="text" id="currenth">
</div></div>
</div>
<div class="vhbox" style="background-color:#0c0">
<div class="t"><div class="c">
The height of this div should be 100% of the viewport and maintain this height when scrolling the page
</div></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></pre>
<p><br /></p>
