Google Map layout best way

I have a plunker here - https://plnkr.co/edit/PvszkAJCwFK9FhftEwTA?p=preview

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.

I’m not sure what you mean.
In what way do you want the header to respond to changes in height?

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.