How To Do 100% Height Properly


100% height, right?

CSS is fun, said no one ever

CSS has it's moments. Like when you get that awesome translate figured out, or you finally see flexbox in action, or when you hear they may finally finally finally be coming out with CSS variables. Those are all good times. Those are times you'll want to put on your calendar and remember 5 years from now when your CSS stylesheet is entering kindergarten for the first time and you have to wipe away a tear of hex colour codes as ze goes and plays with the other stylesheets.

Sorry.

Anyway, CSS is awful. It always has been and it's not getting better anytime soon. But thankfully, there is one easy solution of one of CSS's hardest problems:

100% Height

Let's say you're making a big splash page. You could position the wrapped absolutist, make it 100% wide and 100% tall:

But what if you want to put something under it?

That doesn't work. Your absolute positioned div is covering up whatever you want to show people.

There's Always JavaScript!

If you're one of those people who like cutting paper with a chainsaw, yeah, there's always JavaScript.

But what if they change their website size? Then you have to add a resize function callback to change it around too.

Is there an end to this madness?

Yes, and it's incredibly well supported cross-browser and has been around since IE 9. Say hello to vh, or viewport height.

Yes, it's really that easy. "100" is a percentage. If you use "50", you get half the height.

You can even use the vw or viewport width values as well!

Is it Really that easy?

Yes and no, as with all things CSS. Browsers younger than IE9 don't support it so you'll want to add a fallback. Sometimes the design might look odd on mobile too, so you'll want to add a min-height to the element as well.

Have you ever used vh or vw? What did you think of it?

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close