html - 为什么我的 Google map 会溢出我的 CSS 网格容器？

Question

我的 Google map 的一部分在底部被截断了。我在 CSS 网格容器中有 Google map ，但它似乎溢出(？)网格。我目前将谷歌地图占据的网格区域(谷歌地图)的高度设置为“100vh”。我之前将高度设置为“100%”，但它只占据了浏览器视口(viewport)的一半。视口(viewport)越长，谷歌地图在底部被切断的越多。

这是一个非常小的问题，不会影响应用程序本身，但它只是让我感到困扰，因为没有显示整个 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

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

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

https://jsfiddle.net/9ks2my0a/