javascript - 导航栏下方的全屏 map

Question

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

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

我的CSS代码如下:

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

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

   }

这是我的页面的屏幕截图，您可以在右下角看到 map 属性和控件已被 chop :

Answer 1

您将 map 高度设置为 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;
}