Bootstrap fullscreen google maps with navbar

Question

I have a full screen google map application with a navbar on the top.

So i have a setup like this:

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

with the mapcanvas element having height and width to be 100%.

However, the mapcanvas seems to overflow out the page and the the entire page could scroll down the page by the amount of the navbar.

How would i go about fixing that?

Answer 1

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

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

If you don't want the navbar to be over the map set the #mapcanvas as this (works till IE7 - haven't tried 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>