If the content minus the footer only takes up 50% of the height of the screen, I want the footer to be at the bottom of the screen. As in, I don’t want to push the footer off the screen and make the user scroll to see it.

If that’s the behavior you want, then min-height: 100vh; works magic! If you want to show the footer in the initial viewport (and use your method), you’ll have to “guess” the height of the footer and subtract from the height of the .main (I.e .main { min-height: 94vh; }). This isn’t very elegant and that’s why I use flex box for it :)

Good luck on your web dev journey! Hope this helps!