Attempt #1: CSS grid (rows: `1fr auto`) and `min-height: vh100`

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 #1: CSS grid (rows: 1fr auto) and min-height: vh100</title> <style> body { background: #fff; color: #000; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; } footer { background: #000; color: #fff; text-align: center; } </style> </head> <body> <div class="container"> <h1> Attempt #1: CSS grid (rows: <code>1fr auto</code>) and <code>min-height: vh100</code> </h1> <p>Hello, world!</p> <aside></aside> </div> <footer>© 2024 Ian J. MacIntosh</footer> </body> </html>

My Commentary

Oops. I don't even need to look at this on mobile, the footer gets cut off on desktop.

No problem, let's just...

git commit -am "Remove the margin, add padding, apply box-sizing everywhere"