为什么我的Google Maps溢出了CSS网格容器？

Question

我的Google地图的一部分在底部被切除。我在CSS网格容器中安装了Google Maps，但是似乎溢出了（？）网格。目前，我将Google Maps占据的网格区域（google-map）的高度设置为“ 100vh”。我以前将高度设置为“ 100％”，但是它仅占据了浏览器视口的一半。视口越长，底部的Google Maps越多。

这是一个很小的问题，它不会影响应用程序本身，但它使我感到困惑，因为它没有显示整个Google Map。

这是一些屏幕截图；第一个屏幕截图是最大化的（Google Chrome）浏览器，第二个屏幕截图是最小化的浏览器。我用红色圈出了两个屏幕截图之间的区别。

这是App.vue中的代码：

<template>
    <div id="app">
        <Search id="search-bar" @location="getEvents"/>
        <div id="content">
            <EventList id="event-list" @markerIndex="getMarkerIndex" :events="events"/>
            <GoogleMaps id="google-map" :events="events" :markerIndex="markerIndex"/>
        </div>
   </div>
</template>

<script>
    //
</script>

<style lang="scss">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "search"
    "content";
}

#content {
  width: 100vw;
  height: 100vh;
  grid-area: 'content';
  display: grid;
  grid-template-columns: 25% auto;
  grid-template-areas: "list" "map";
}

#search-bar {
  grid-area: "search";
  width: 100vw;
  height: 5vh;
}

#event-list {
  grid-area: "list";
}

#google-map {
  grid-area: "map";
  width: auto;
  height: 100vh;
}
</style>

Answer 1

您在Google Map元素上方有一个搜索栏元素。如果还有另一个元素占用100vh，地图应该如何占据5vh？将地图容器的高度更改为95vh。

这是一个非常简单的小提琴，它说明了正在发生的事情。在此示例中，google-map和content元素均被定义为height=95vh。请注意，这是多余的，您可以将地图列为height=100%。

https://jsfiddle.net/9ks2my0a/