Height: 100% or minimum height: 100% for html and body elements?

Question

When developing layouts, I set the html, body elements height to 100% , but in some cases this fails, so what should I use?

 html, body { height: 100%; } 

or

 html, body { min-height: 100%; } 

Well, this is not an opinion based on the fact that each method has its own flaws, so what is the recommended way to go and why?

Answer 1

If you are trying to apply background images to html and body that do not fill the entire browser window, then no. Use this instead:

 html { height: 100%; } body { min-height: 100%; } 

My reasoning is given here (where I explain in detail how to apply backgrounds this way):

By the way, the reason you need to point height and min-height to html and body respectively, is because not a single element has an internal height. Both default height: auto . It has a height of 100%, so height: 100% is taken from the viewport and then applied to the body at least to allow scrolling of the content.

The first way, using height: 100% for both, prevents the body from expanding with its contents when they begin to grow beyond the viewing height. Technically, this does not prevent the content from scrolling, but it causes the body leave a space under the fold, which is usually undesirable.

The second way, using min-height: 100% for both, does not cause the body expand to the full html height, because min-height with a percentage does not work on body if html has an explicit height .

For completeness, section 10 of CSS2.1 contains all the details, but it's an extremely confusing read so you can skip it if you are not interested in anything other than what I explained here.

Answer 2

You can use vh view height ( vh ):

 body { min-height: 100vh; } 

Regarding the screen, not the parent height, so you don't need the HTML height: 100%.