100vh, not 100% | Body Height

[reesooyt]

Why am I told that I should be using 100vh instead of 100% as the height attribute of the body element? Don’t these two end up giving the same measurements? (Though I’ve heard 100vh can vary on mobile browsers, but that wouldn’t be an issue in this case.)

[hbar1st]

if you have a question about a specific challenge, please click the Ask for Help button to open a topic with that challenge’s link and your code.

If this question is just a general one, then you should know that vh is respective of the viewport height while % is respective of the parent element.
(so 100% of a parent element that takes up 50% of vh is going to give you a size that is about half the view port height even though the element says it wants 100%, as that % is respective of its parent element)

[lasjorg]

To use 100% on the body you would have to set it on the html as well as it needs to be propagated down.

html,
body {
  height: 100%;
}

If you use vh it is set in relation to the viewport and not the direct parent element.

[reesooyt]

I understand what you are getting at, but by default, body has a height of “100%” (auto) though it has margins. Without these margins, the height is 100vh. Same applies for html.

UNLESS the content goes past 100vh, in which case the height could be 200000px but vh still 800px.

So, the vh actually has a difference to the height of body. I don’t know why i didn’t understand.

Thanks for helping!

[lasjorg]

The default height of the body and html element is 0. The default margin on the body technically makes the html 8px tall. I’m not sure if you think they have a height because if you set a background color it fills the page. But that isn’t why that happens.

height: 100% is relative to the parent and by default, an element doesn’t have a height (content size). Even if you fill a container with content so it now has an intrinsic height an empty child element will not be able to set height: 100%

vh is relative to the viewport height and the viewport is not dependent on any element inside the document, it is basically the browser window.

[reesooyt]

I meant to say that the body automatically resizes. If not, why is that the behaviour I’m seeing in the FCC code editor?

by default, an element doesn’t have a height

perhaps that’s because height is auto?

I totally understand vh, and the fact that body is not vh when the body extends past the viewport, but I don’t get why the height of body/html is zero, because if so, I wouldn’t be seeing anything.

Sorry if this sounded demanding/rude, I’m mostly angry at why I can’t figure this out

[reesooyt]

I think I understand most of it now, apart from:

1. Shouldn’t height attribute of body be initially auto? It seems to rescale when content is added inside the tag.

2. Why does an element, a direct child of the body tag, with width/height set to 100% (with the body’s height set to 0):

Have it’s width/height automatically re-set to 100vw/100vh respectively WHEN POSITION IS FIXED/ABSOLUTE

Have it’s width/height be 0, like expected, WHEN POSITION IS ANYTHING ELSE, LIKE STATIC/RELATIVE

I really don’t understand the latter and can’t think about it clearly - how the heck does position correlate with size?

[lasjorg]

Just to get this out of the way. You can not trust the freeCodeCamp editor about the height as the preview is inside an iframe with height set on it. If you want to test these things use a local environment or Codepen in debug view.

---

If the page has no content html/body are collapsed and is 0 in height (ignoring the margin). They will grow as needed with the content.

The main point of giving elements a height is so that child elements can use the height.

This does not work

body {
  height: 100%;
  background-color: cadetblue;
}

.box {
  height: 50%;
  background: orange;
}

The box will collapse.

If you add the html to the selector, it will work.

html,
body {
  height: 100%;
  background-color: cadetblue;
}

.box {
  height: 50%;
  background: orange;
}

If you add 100vh to the body, it will also work.

body {
  height: 100vh;
  background-color: cadetblue;
}

.box {
  height: 50%;
  background: orange;
}

Another example, centering using grid will only work if a height is set.

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.box {
  height: 50%;
  width: 100%;
  background: orange;
}

It will not work with height: 100%; on the body, unless you also set it on the html.

html {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  height: 100%;
}

.box {
  height: 50%;
  width: 100%;
  background: orange;
}

[reesooyt]

Ah, thank you for the clear and concise answer with explanations and examples. Exactly what I was looking for ^^