Adjusting the safe area inset bottom

On new full-screen phones, there is a navigation bar at the bottom of the screen. When you open the browser, this bar can interfere with the content.

For example, let's suppose that you have a fixed menu at the bottom of the page:

html
<div class = 'Menu'>
    <a href = '/home'>Home</a>
    <a href = '/noti'>Notifications</a>
    <a href = '/profi'>Profile</a>
</div>

To avoid overlapping the navigation bar and the content, you can use the env(safe-area-inset-bottom) variable:

css
.Menu{
    bottom: 0;
    left: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    position: fixed;
}

On a screen without a navigation bar, the padding would be 10px. On a screen with a navigation bar, the value is calculated automatically to avoid overlaps.