Making DIV height at least as tall as the page in CSS

Question

I have a DIV that I want to touch the bottom of the screen (for appearance reasons). Sometimes the content is enough tall to do that, but sometimes the content is too short and the DIV won't touch the bottom of the screen. Is there a simple workaround?

Answer 1

If you set min-height to 100% for the DIV, you also need to include:

body, html {    height:100% } 

Elements expand to the size of their container, so make sure the container (being the page itself) has a height of 100% as well.

Answer 2

For anyone reading this later (as I am) you can use

min-height: 100vh; 

The vh unit stands for viewport height and is a percent of the screen size.