I have a <header> that is position: fixed; to the top of the display.
The natural consequence of this is that <main> ends up going underneath the fairly sizeable <header>.
I've faced this problem before and have solved it with a simple margin-top assignment on <main>. Here the issue is a little different though.
The height of the <header> is variable and unknown. It has top and bottom padding of 5px and a bottom margin of 5px. It has no explicitly set height of its own; it is decided by the content within.
The largest element in the <header> is an image that is assigned its height as 20vh. There is also an <h1> and <h3>, again sized using <vh> units. I know of no way that allows me to offset <main> so it is always below this dynamically-sized, responsive <header>.
I've been browsing SO but have found no single accepted solution to solve this. Many ideas rest solely on catching window resizes with JavaScript, getting the computed height of the header and assigning the top of main to match. I fear this approach will decrease performance and also introduce annoying page jumps/leaps etc. as JS catches up with the scrolling.
How this is kind of problem usually tackled in responsive design? Ideally, I'm looking for a pure CSS solution to this problem, or some kind of workaround for `position: fixed;'. Failing that, an elegant and versatile JS solution that doesn't hinder performance. This issue is causing me problems, because none of my usual attempts to resolve absolute/fixed positioning headaches are able to help.
Any advice would be much appreciated.
-Ilmiont
