I dont like doing this sort of is this the best way but
I have a google maps sort of layout using leafletjs.
I want the map to 100% height and width with a scrolling section on the left side that is 100% height of the page. This all seems to working but
I would like a header at the top of the page which I have done using absolute positioning, I also need a second nav area below the header, again I have done this with absolute positioning
This way the header doesn’t respond to changes in it’s height when the page is resized.
It is possible to have a header with out absolute positioning so it will respond to height changes.
Do you mean something like this using flexbox for modern browsers only (ie11+)?
(View both on codepen to see wide screen version as snippet above shows the smaller screen view)
Here’s another version that uses the display:table/cell algorithms for a similar effect. This has greater support in older browsers but needs hacks to overcome some browser shortcomings.
The flex version is probably the version to go forward with.