html – 带导航栏的Bootstrap全屏谷歌地图

发布时间：2020-12-14 18:43:50 所属栏目：资源来源：网络整理

导读：我有一个全屏谷歌地图应用程序,顶部有一个导航栏. 所以我有这样的设置： div class="navbar" nav bar stuff....../divdiv id="mapcanvas"/div 使用具有高度和宽度的mapcanvas元素为100％. 但是,mapcanvas似乎溢出页面,整个页面可以向下滚动页面的导航栏数量.

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

所以我有这样的设置：

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

使用具有高度和宽度的mapcanvas元素为100％.

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

我该如何解决这个问题？

解决方法

也许尝试将navbar-fixed-top添加到您的navbar类.

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!