Showing a Footer on Mobile

I just wanted to put a footer at the bottom of the screen on desktop and mobile. Making it happen was harder than I expected.

If you're here just looking for the fix:

body { min-height: 100dvh; }
Copy to Clipboard

If you want to learn more, I'll show you some other approaches that didn't work.

These pages are best viewed on mobile so you can see for yourself how each change affects the page display, but I'll include some screenshots from iOS and Android anyway.

Let's go: CSS grid, 100vh, can't lose

• Attempt #1: CSS grid (rows: 1fr auto) and min-height: vh100 (View)
• Attempt #2: Remove the margin, add padding, apply box-sizing everywhere (View)
• Attempt #3: padding-bottom: calc(10px + env(safe-area-inset-bottom)) (View)
• Attempt #4: Update the meta viewport tag with viewport-fit=cover (View)
• Attempt #5: Use min-height: 100dvh (View)