Fixed header width relative to 2/3 image

[culbrique]

Hi
I would like to have a fixed header width relative to the width of an image
https://jsfiddle.net/0nvjbbz8/

The problem is that the header is fixed, so I can’t use relationship with parent/child.
My image is in 2/3 so 66.666%. I tried to calculate the header with some math like calc(100% – 33.333%) but it doesn’t work !

I just want to keep the image height relative to the screen, and the header fixed.

Every help would be appreciated !
Thx

[Chris Coyier]

I dunno maybe some kinda sticky header?

https://codepen.io/chriscoyier/pen/wepeGw

[culbrique]

Thanks Chris

But sticky doesn’t change the width value of the header, and that’s the deal.
I’m looking for a trick to apply to the header something that say : do the same width as the image.

I could do it with Javascript but window.resize do a time latency.
The only thing I know is that my image is 2/3, keeping fixed header and image 100vh.

[Author]

Posts