flexible height element

[bikejunkie]

Hello folks;
I wonder if you can point me in the right direction here. I’m interested in making an element the full remaining height of the viewable screen below a header image (without bringing up a scrollbar. If the header was a fixed height, I could use calc(). However the image is dynamic to the screen size. This means that the height isn’t set. Can I use calc with a div name? Or is there something else that will work?
(if this description isn’t sufficient, let me know and I’ll throw something on codepen)

[Paulie_D]

A Codepen would be good but frankly if the header height is dynamic…I’d use Javascript.

It’s not hard with Jquery.

[bikejunkie]

Thanks a lot Paulie. I want to emphasize that ‘not hard’ is a relative term. I’m still learning css, and have only the most rudimentary skills in javascript (or any type of caffeinated code for that matter).
But here’s a codepen for the look I’m going for

http://codepen.io/anon/pen/MYPpvx

[Shikkediel]

If you’re using viewport units, there’s be no need for calc(). You can set them directly, just make sure the elements together make 100vh :

An example

And use box-sizing: border-box on all elements…
It’s easier to use a percentage for width by the way (also for height if the parent is body/window) – vw and vh don’t account for scrollbars. Less of an issue if there aren’t any of course.

[Author]

Posts