Attempt #2: Remove the margin, add padding, apply box-sizing everywhere

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 #2: Remove the margin, add padding, apply box-sizing everywhere</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; } </style> </head> <body> <div class="container"> <h1>Attempt #2: Remove the margin, add padding, apply box-sizing everywhere</h1> <p>Hello, world!</p> <aside></aside> </div> <footer>© 2024 Ian J. MacIntosh</footer> </body> </html>

My Commentary

Nice, it looks perfect on my computer, but when I check with my phone, the browser UI hides the footer.

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)

And even worse, testing a fix is going to require a real phone or an emulator, because I can't reproduce the same issue on my desktop.

I did some Googling and found a fix that involves introducing some exotic syntax I've never encountered: env(safe-area-inset-bottom) (MDN Docs)

Next: git commit -am "Add `padding-bottom: calc(10px + env(safe-area-inset-bottom))`"