DEV Community


Discussion on: What is a specific recurring challenge you have with CSS?

brsullivan profile image

Getting an element to take up the full height of a browser window without pulling in JavaScript to detect and hardcode every time the window height changes.

nieuwepixels profile image
Nieuwe Pixels

Its a nasty one, but with some tweaking (I use Flexbox) setting the specific row to 100%, things are possible.

Also look into columns equal height fix. There are good articles out there.

danielatwood profile image
Daniel Atwood

Have you heard of viewport units? Specifically vh. They're like percent of the viewport. 50vh being half the height and 100vh being the full height.

This also works with vw for width.

brsullivan profile image

Ah, yes. I wasn't super clear with my initial comment.

Viewport units work great if I'm actually going for 100% of the window. Usually I have this issue when I've got a static navbar or footer that takes up some of the space and want to take up all of the remaining.

Sometimes calc() functions work and sometimes they don't, sometimes changing the window size breaks it, sometimes it doesn't...c'est la vie.

Thread Thread
5t3ph profile image
Stephanie Eckles Author

Just in case it helps, I think I have a tutorial that explores at least similar scenarios.