Attempt #3: `padding-bottom: calc(10px + env(safe-area-inset-bottom))`

Hello, world!

View Source

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Attempt #3: padding-bottom: calc(10px + env(safe-area-inset-bottom))</title> <style> * { box-sizing: border-box; } body { background: #fff; color: #000; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; margin: 0; } .container { padding: 10px; } footer { background: #000; color: #fff; text-align: center; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } </style> </head> <body> <div class="container"> <h1> Attempt #3: <code>padding-bottom: calc(10px + env(safe-area-inset-bottom))</code> </h1> <p>Hello, world!</p> <aside></aside> </div> <footer>© 2024 Ian J. MacIntosh</footer> </body> </html>

My Commentary

Here's a video of me scrolling up and down to show and hide the footer on my phone (Brave 1.73.91 on Android 15; Google Pixel 7) (Open)

Nope.

After searching Google some more, I find another fix: viewport-fit: cover (W3C)

Next: git commit -am "Update the meta viewport tag with `viewport-fit: cover`"