Browser-Relative Heights with CSS3 Viewport Percentage

viewport percentage height

In the first of a few “Whaaaat I had no idea CSS3 did that” posts from me: You can set elements to be a percentage of the height of your browser window!

I found this out the usual way: As a fingers-crossed Google search just before giving up and breaking into my Big Bag of Ugly and Fragile jQuery Hacks. I’m building a website for a painter friend, and we wanted his pieces to fill out the browser vertically. Here’s the rule that ended up working:

.painting {
    max-height: 90vh;
    width: auto;
}

It’s so simple and so useful and browser support is pretty good. It’s not the only other wonderful CSS3 discovery I made that day, either, so stay tuned. And as a general thought: always Google your CSS dreams before assuming they can’t come true. There’s a lot of amazing stuff in CSS3, quite a bit more than I realized.


Add a Comment

Your email address will not be published. Required fields are marked *