html - 使用导航栏 Bootstrap 全屏谷歌地图

标签 html css google-maps twitter-bootstrap

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

所以我有这样的设置:

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

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

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

我该如何解决这个问题?

最佳答案

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

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

如果您不希望导航栏位于 map 上方,请将 #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>

关于html - 使用导航栏 Bootstrap 全屏谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14113586/

相关文章:

html - 导航栏元素彼此重叠而不是相邻

android - 作为 ListView 行的 fragment (Google Maps Android API v2)

javascript - 如何迭代 TR > img

javascript - 我找不到为什么这个简单的 JS 不起作用。 (营业税计算器)

html - <div> 长度自动适配内容长度

javascript - CSS :hover not working in chrome for delayed dynamically added classes

html - 重复嵌套交替样式

无空格内容的 HTML 自动高度

javascript - 在 data.feature 对象上添加工具提示,就像我们可以为标记做的那样

ios - 在我们之前尚未在 GMSPlacePickerViewController 实例上设置委托(delegate)