2

I have the below html which is essentially 3 pages on 1 screen to allow for scrolling. Each of these 3 container divs have a height of 100%. It looks fine on desktop, but in mobile, the browser's address bar constantly hides itself when scrolling. This causes all the divs to change size since height with address bar is different than height without address bar. That makes things extremely jumpy and in general just a terrible experience.

How do 1) set the div to be 100% of the view assuming the address bar is not there and 2) make sure the address bar showing doesn't change the height of my divs?

I use 100% alot in my page...

<body>

    <div id="top">
    </div>  

    <div id="second">
    </div>

    <div id="third">
    </div>

</body>

I found this link: Background image jumps when address bar hides iOS/Android/Mobile Chrome but it did not help me since $(window).height() changes when the address bar is there or not, and I also am not using a background image.

The mobile I am testing on is a mobile chrome browser on android 4.3 galaxy nexus

Community
  • 1
  • 1
Terence Chow
  • 10,755
  • 24
  • 78
  • 141
  • Possible duplicate of [Mobile Webkit browser (chrome) address bar changes $(window).height(); making background-size:cover rescale every time](http://stackoverflow.com/questions/24479085/mobile-webkit-browser-chrome-address-bar-changes-window-height-making-ba) – Rotareti Aug 30 '16 at 22:36

1 Answers1

2

In case you're still having this issue, this might fix it.

Using the link you found, I found that referencing the body instead of a specific element helped to fix the height issue for the entire page and not just background images.

var bg = jQuery("body");
jQuery(window).resize("resizeBackground");
function resizeBackground() {
    bg.height(jQuery(window).height());
}
resizeBackground();
rkty13
  • 33
  • 1
  • 5