Google loading fullscreen maps with navigation

Question

I have a full-screen Google Maps application with a navigation bar at the top.

So, I have this setup:

<div class="navbar"> <nav bar stuff......> </div> <div id="mapcanvas"></div> 

with a mapcanvas element having a height and width of 100%.

However, mapcanvas seems to overflow the page, and the entire page can scroll down the page by the size of the navigation bar.

How can i fix this?

Answer 1

Perhaps try adding navbar-fixed-top to your navbar class.

 <div class="navbar navbar-fixed-top"> <nav bar stuff......> </div> 

If you do not want the navbar to be above the map, set #mapcanvas like this (works before IE7 - did not try ie6)

 html,body {width:100%;height:100%;margin:0;padding:0;} #mapcanvas { background:red;display: block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-top:50px; /* adjust top margin to your header height */ } 

 <div id="mapcanvas">asdf</div>