CODEWITHSUNDEEP
htmlcssgoogle-mapstwitter-bootstrap
Pwnna
Pwnna

Reputation: 9538

Bootstrap fullscreen google maps with navbar

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?

Upvotes: 6

Views: 9874

Answers (1)

easwee
easwee

Reputation: 15905

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>

Upvotes: 18

Related Questions