Attempt #5: Use `min-height: 100dvh`

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 #5: Use min-height: 100dvh</title> <style> * { box-sizing: border-box; } body { background: #fff; color: #000; display: grid; grid-template-rows: 1fr auto; min-height: 100dvh; 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 #5: Use <code>min-height: 100dvh</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 trying to scroll up and down on my phone, but I can't because the content exactly fits the viewport (Brave 1.73.91 on Android 15; Google Pixel 7) (Open)

Bam! Payday.

To paraphrase the official spec (source), "Dynamic Viewport-Percentage Units" like dvh are defined by the height of the viewport minus the browser UI, so authors can make content exactly fit within the viewport -- whether browser doodads like address bars and toolbars are visible or not.

I don't know why I didn't come across this solution first; it's clearly the most logical one, but I'd never heard of it. Now you have.

git push