Viewport height on mobile devices

Question

So I'm having some real troubles trying to design a responsive website. The problem comes from the fact that I am using the vh unit, that sets some of my div to 100% of the viewport height.

While this works perfectly fine on desktop, my issue is that the viewport on mobile actually changes :

• As you scroll down the navigation bar (from chrome for example) disappears, making the viewport taller. When this happens, the divs that are based on the vh unit re-adapt and makes everything slide a little (which is really not good-looking when you're scrolling down).
• If you want to go back on something you missed, scrolling up makes the navigation bar appear again, and everything slides again the other way.

So basically, if the user slides up and down on my website, this issue will make it's experience way worse than it should.

Is there any solution that allows me to set my divtoo full viewport dimensions without allowing things to resize / adapt to the things that resize ?

Answer 1

Ok. Let's work around this. I know only 2 solutions in this situation.

• Simply put there "dirty" hack. When navigation bar disappear it means that height of viewport becomes taller. You can simply animate it with css3 awesome transitions :) transition: height 1000000000000000s. Who will be so located on the page to see it? )
• JavaScript. Before page load check viewport (JavaScript takes height with navigation bar), set fixed height to all your blocks.