Make Body Have 100% of the Browser Height

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

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

How to make body take 100% min height and height as auto

body { min-height: 100vh; } is all you'll need.

Set body height to full window height

What you want isn't possible and more precisely not logical. let's ask a trivial question:

What will define the height of the body?

1) you want your body to be height:100% of the screen: You can either use a cascading height:100% or height:100vh and your body will have an explicit specified height thus you can use percentage height inside it but the body won't grow more than 100%.

2) you want your body to be min-height:100% of the screen: You can use either min-height:100vh or min-height:100% while having height:100% set to html. In this case, the content of the body will define the real height as you simply added a min-height constraint. If you have a lot of content, the body will grow beyond the 100% limit, if not you will have it at 100%. In this situation, it's clear that the content cannot use percentage value within height since the content is defining the body height.

You can have either (1) or (2) but you cannot have both since there is no logical way to define a min-height to the body, allow it to grow (depending on its content) and allow its content to use percentage values within height.

height: 100% or min-height: 100% for html and body elements?

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

How can I make the BODY element take up 100% height of the HTML element?

Use this:

body {height:100vh;}

along with adding the rest of the properties for your body element

CSS How to make a container the entire height of the browser window

give your html and body a full browser height:

html,body{height:100vh}

more on vh mdn

---

Related Topics