导航栏下方的全屏地图答案

【问题标题】：Full Screen Map Beneath NavBar导航栏下方的全屏地图
【发布时间】：2014-12-09 00:18:26
【问题描述】：

我正在尝试在我的 Bootstrap NavBar 下方添加一张地图作为全屏背景，但目前我的代码导致地图底部溢出页面。

我尝试了不同的边距和位置，但无法在导航栏下方的页面范围内显示地图。我知道问题的一部分是 top:50px 但我不知道如何解决这个问题。

我的CSS代码如下：

  #map { 
  /* Set rules to fill background */
   height: 100%;
   width: 100%;

     /* Set up positioning */
    position: fixed;
    top: 50px;
    left: 0;

   }

这是我页面的截图，你可以看到右下角的地图归属和控件被截断了：

【问题讨论】：

你能在 jsFiddle 或 Bootply 中复制这个吗？在不知道周围代码的情况下，很难提供帮助。
你说你知道问题是 top:50px;你有理由需要它吗？
使用position:absolute;border-top:50px solid #fff;top:0px; 而不是position:fixed;top:50px; 代表#map jsfiddle.net/7291hLkx/2
@DavidG 见 Dr.Molle 的 jsfiddle，他的方法解决了这个问题，代码和我自己的类似。谢谢:)
@skv 它被设置为 50px，因为这是我的导航栏的高度，我希望地图开始时没有间隙

标签： javascript html css twitter-bootstrap google-maps

【解决方案1】：

您将地图高度设置为 100%。请尝试设置固定高度。

如果太宽，请将其添加到您的 CSS 文件中。

.gmnoprint img {
    max-width: none; 
}

或者，如果不起作用，试试这个：

html,body {
    height: 100%; 
    width: 100%;
}
.whateveryourmapis {
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    margin-top: -50px;
}

【讨论】：

height: 100% 的原因是为了确保地图保持相对于窗口的大小。如果我设置了一个固定高度，那么在调整大小时我可能会遇到显示地图的问题。不过感谢您的帮助，非常感谢！

【解决方案2】：

您需要等到显示内容的 div，因为谷歌地图很早就检查它的宽度 - 并且宽度变小（或 0）并且不呈现。

试试这个：

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
    });

这是回调 - 当点击选项卡后显示内容的 div 然后在正确的宽度上“调整”谷歌地图。

对我来说这是可行的。

【讨论】：