Attempt #4: Update the meta viewport tag with `viewport-fit=cover`

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, viewport-fit=cover"> <title>Attempt #4: Update the meta viewport tag with viewport-fit=cover</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 #4: Update the meta viewport tag with <code>viewport-fit=cover</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)

Welp, I guess we just have to live with it and if anyone asks, I'll need to explain that browsers get the last word on how pages render.

But wait a second, there's yet another solution. And this one actually makes sense: set the page height using dvh units (MDN Docs)

It seems like exactly what we want: a unit of measure that considers browser chrome.

Next: git commit -am "Update the body `min-height` to `100dvh`"