View Width & Height

[00:00:00]
>> Brian Holt: The page here is actually only, that has a lot of vertical space that it could be taking up. And honestly, this is fine. We could leave it like this. But I'll show you kind of a little hack, that you can get it to take the whole height of a page.

[00:00:14]
You can do height, 100 vh.
>> Brian Holt: And now, it's vertically centered, as well. So, let's talk about what vh is. One, vh is only gonna work in really new browsers. So, if you're gonna use a vh, be careful, if you're trying to support older browsers. Right? But what it means is my browser is 100 vh tall.

[00:00:37]
And so, if I say, 100 vh, it says take 100% of what's available in the, this is called the viewport. So it's saying take 100% of the viewport. If I said something like 80 vh, it'd say, okay, take 80% of the available view height. So, now, if I refresh this, it's going to move up, just a tiny bit.

[00:01:01]
>> Brian Holt: So, again, what this is doing, it's saying the body should take 100% of the user's viewport. And then, here, I'm saying center it. That's why it ends up sitting directly in the middle of the viewport. Make sense? It's kind of a nice trick. You could here, as well, if you wanted to, do 100 vw,

[00:01:25]
>> Brian Holt: which does not stand for Volkswagen. It stands for 100% of the view width, as well. Right? And that would work, as well. But it already does that, so it's superfluous.
>> Brian Holt: Okay. So this is coming along already better. Right?