嵌入式谷歌地图底部的空白

Posted 2023-03-05

【中文标题】嵌入式谷歌地图底部的空白

【英文标题】：White space on the bottom of the embeded google maps

【发布时间】：2018-04-11 04:55:33

【问题描述】：

我是 CSS 新手，所以我从某个地方复制了这段代码来创建响应式嵌入式谷歌地图，但是在引入了以前没有的“max-height”属性后，页面底部有空白。

/* Flexible iFrame (for google maps)*/

.Flexible-container 
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;


.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 500px;

【参考方案1】：

移除 padding-bottom: 56.25%;来自你的 CSS

【讨论】：

谢谢，但它实际上降低了价值，因为如果我完全删除它，它会显示一个非常小的地图。

给容器一个宽度

【参考方案2】：

我修复了这个问题，将以下样式代码直接添加到 iframe embed：

display: block;

我还使用 CSS 类应用了它，也正确地填充了屏幕。响应行为还可以。

希望对你有帮助！