我是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;
}
我修复了这个问题,将以下样式代码直接添加到嵌入的 iframe 中:
display: block;
我还使用 CSS 类应用了它,也正确地填充了屏幕。响应行为还可以。
希望对您有所帮助!
删除底部
中 填充:56.25%; 从你的 CSS