<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>