'How can I get an interior element to scroll while allowing mobile browsers to hide the address bar?

I have 2 divs, outer is height: 100% and inner has a very long content and the content is dynamic.

If I set the inner div's height to 100vh, scroll works but in mobile browsers, the address bar is not going away.

If I set the inner div's height to 100%, scroll doesn't work on desktop but in a mobile browser, the address bar is going away and everything is fine.

I created a sample here:

<div style="height: 100%; width: 300px; background-color: red; padding: 20px;">
  <div style="height: 100%;overflow: scroll;">
    <div style="height: 2900px; background-color:blue;"></div>
  </div>
</div>

https://jsfiddle.net/h152gn4w/

What is the best way to make scrollable safely both in mobile browsers and desktop?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions