html - 带导航栏的引导全屏谷歌地图

Question

我有一个顶部有导航栏的全屏谷歌地图应用程序。

所以我有这样的设置：

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

mapcanvas 元素的高度和宽度为 100%。

但是，mapcanvas 似乎溢出了页面，整个页面可以向下滚动页面导航栏的数量。

我将如何解决这个问题？

Answer 1

也许尝试添加navbar-fixed-top到您的导航栏类。

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

如果您不希望导航栏位于地图上方，请设置#mapcanvas为这样（直到 IE7 - 还没有尝试过 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>