Layout for mobile devices: how to remove space when scrolling?

Question

css

When scrolling down on a mobile device, the site's left menu has a fixed height of 100% (screen height - browser address bar height). When scrolling down, the address bar disappears (consequently, the freed space is occupied by content and so on), but the menu height remains for some time (bottom gap = address bar height), and then becomes equal to the screen height. So the question is: how to remove this gap when scrolling, that is, to make sure that this gap does not appear, I know that this is not fatal, but I personally do not like it. If you do not understand: go to reespace.ru from your mobile phone.
By the way, the toaster has the same problem, but it is less pronounced =D. See the picture in the attachment.

Answer 1

Make the left menu be 100% of the window and the top menu be a layer above it (z-index: 5 or 9 or 100, as you wish).
Then, when scrolling, the top menu will leave, and the left one will remain.
This is the first thing that comes to mind