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.
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.
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.
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.
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.
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.
Just in case it helps, I think I have a tutorial that explores at least similar scenarios.