谷歌地图iframe设置高度？

Question

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

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

看起来就像这样。

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

<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％大小的地图。我该如何存档？

Answer 1

你正在获得空白，因为你使用＆＃34; padding-bottom：77.4％;＆＃34;。只需使用高度：30％;