3

I have a responsive website where the first div on the site fills up the entire height of the browser using height: 100%. Mobile Chrome Browser unfortunately hides the address bar on some devices including iPhone, iPad and many Android devices. This leads to a page jump because right after scrolling the height of the window grows plus the height of the address bar.

How do I prevent this?

Thank you!

mkampitsch
  • 93
  • 1
  • 11

1 Answers1

2

Write some JS to determine the window size and set the height to that pixel value instead of a percentage. Make sure to handle orientation change events to account for that scenario as well.

Robert Levy
  • 28,747
  • 6
  • 62
  • 94
  • Ok, this would have been my solution too. Hoped for something better though :) Thank you! – mkampitsch May 13 '14 at 18:51
  • Didn't realize this question was asked until I already asked and answered somewhere else. Anyway, [here was my answer](http://stackoverflow.com/a/40156488/172852) using JS. – Bryan Willis Oct 20 '16 at 14:10