Question

我是CSS的新手，所以我从某个地方复制了这段代码，以创建响应式嵌入谷歌地图，但在介绍＆＃34; max-height＆＃34;后，页面底部有空白区域。之前没有的财产。

/* 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;
}

Answer 1

我解决了这个问题，将以下样式代码直接添加到iframe embbed：

display: block;

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

希望它有所帮助！

Answer 2

去除填充底部：56.25％;来自你的CSS

嵌入谷歌地图底部的白色空间

2 个答案: