Pinned footer on mobile without browser bottom bar overlapping

Hi guys,

Currently I am trying to make a footer stick to the bottom of the website (using ‘Pinned’) for a mobile version of the website.

The problem: On mobile browsers (Chrome and Safari iOS), the browser bottom bar slides up and down depending on your scroll behavior; so in some cases it overlaps with the footer.

Is there a way to make an item pinned to the ‘inner height’ of the browser, so that it will stick to the top of the browser bottom toolbar instead of getting hidden by it?

Thank you in advance!

1 Like