谷歌地图iframe设置高度？答案

【问题标题】：Google map iframe set height?谷歌地图iframe设置高度？
【发布时间】：2017-09-02 11:25:26
【问题描述】：

我只想嵌入我的谷歌地图位置。当我使用 iframe 时，它会达到 100% 的高度。当我设置高度时

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 30% !important;
}

看起来像这样。

地图大小看起来不错，但它在页脚之间使用了不需要的空白。这是我的 iframe

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-69Hn5JZ4joRzaymM3Zi2o8&key=AIzaSyDTljbjBpIX73t57vhNIhMKyk0u5p6MNGI" width="600" height="200" frameborder="0" style="border:0">
</iframe>
</div>

.google-maps {
    position: relative;
    padding-bottom: 77.4%;
    height: 0;
    overflow: hidden;
}

我只想显示 30% 大小的地图。我该如何存档？

【问题讨论】：

标签： html css google-maps iframe

【解决方案1】：

因为您使用了“padding-bottom: 77.4%;”，所以您得到了空白。只需使用高度：30%；。

【讨论】：

也可以使用heigth: 30vh;它占据了用户设备屏幕高度的 30%。
啊，我没注意到。谢谢！