1

Dropbox recently updated their website layout where the first div occupies 100% of the window size and vertically centers the content irrespective of the browser height.

I am trying this layout for my own website. However I noticed when I open the website in chrome on my mobile on scroll there is an initial jump and then the page seems fine.

How do i get rid of this scroll jump?

You can check the same by visiting the Dropbox website on you mobile (Android or iOS)

[UPDATE] This happens when you scroll and the address bar hides.

enter image description here

Neil
  • 2,802
  • 8
  • 34
  • 49

1 Answers1

0

This is the best solution (simplest) above everything I have tried.

You could set the height with CSS to 90vh for example, and then set the height to 0.9 * of the window height in px with javascript, when the document is loaded.

For example with jQuery:

$("#element").css("height", 0.9*$(window).height());

)

Unfortunately there isn't anything that works with pure CSS :P

See: This S.O. Question

Community
  • 1
  • 1