Why doesn't min-height not work on my page?

Question

I have a gradient applied to the background of the body element. Then I have a container (right after body) that has a background .png image applied to it. The gradient alwa

Answer 1

Using vh instead of % worked for me without having to use any extra tricks.

This is what I have:

html, body, .wrapper {
    min-height: 100vh;
}

Where .wrapper is the class you apply to your container/wrapper or main body of content that you wish to stretch the full length of the screen height.

This will work as you would expect it to when the content within the wrapper is less or more than the screen height allows.

This should work in most browsers.