Javascript 如何防止在Vue/Vuetify应用程序中放大时调整传单地图的大小

我在使用Vuetify框架的Vue.js应用程序中遇到传单映射问题

我试图让地图占据整个屏幕（顶部导航栏除外），但当我单击缩放按钮时，地图会在页面内垂直调整大小/重新定位

下面是来自JSFIDLE的同一问题的两个屏幕截图，显示在前面：

和之后（注意地图向上移动，隐藏导航栏下方的部分缩放按钮）：

据我所知，之所以会出现问题，是因为Vuetify框架将填充放在map容器元素的顶部，将其（正确）定位在导航栏的下方。但是，单击+/-缩放按钮时，该填充似乎消失，贴图向上移动。但是，我不知道为什么填充会像这样消失（假设这是实际问题）

如果地图明显小于页面高度（例如高度：85%；在我的完整应用程序中），则不会出现此问题。有趣的是，我只在Chrome中遇到了这个问题。在Firefox中，地图保持在其原始位置

我已经复制了使用此代码时出现的问题：

Javascript:

new Vue({
  el: '#app',
  data: () => ({
    map: null,
    tileLayer: null
  }),
  mounted: function(){
    this.map = L.map('map').setView([38.864720, -77.088544], 12);
    this.tileLayer = L.tileLayer( 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
      {
        maxZoom: 18,
      });
    this.tileLayer.addTo(this.map);
  }
})

HTML:

单击缩放按钮时，小提琴中的地图（以及我的实际应用程序）会在导航栏下向上跳跃。如何让它保持静止，并占据导航栏下方的整个窗口？

很可能与

针对这种特定于Chrome的行为提出的解决办法是防止传单聚焦地图：

L.Control.include({
_重新聚焦贴图：L.Util.false//。
});

---

更新的JSFIDLE:

您要做的是，我必须为这个站点做这件事：。如果您想查看，可以在此处找到代码。

<div id="app">
  <v-app id="map-example">

    <v-toolbar color="indigo" dark fixed app style="z-index: 1000;">
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <v-layout>
          <div id="map">

          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

body {
  margin: 0;
  padding: 0
}
.container {
  padding: 0;
  width: 100%;
  margin: 0;
}
#map {
  height: 500px;
  width: 100%;
  z-index: 100;
}