為什么我的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/