Bootstrap fullscreen google maps with navbar

css, google-maps, html, twitter-bootstrap

Solution

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>

Problem

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?

Original source