响应式嵌入式粉底6

Question

我正在为一个Web设计课程的介绍而进行的项目，但是我无法使我的地图具有响应性。我们正在使用Foundation 6，但是实际上我们不允许编辑基础代码，而只能编辑源代码。我最初是这样设置html的：（带有指向我的地图的嵌入链接，这里是我的地图）

<div class="map-responsive">
<iframe src="map here" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

并且CSS设置为：

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;}

但是，这在我不需要的底部增加了很多填充，因为它将页面内容与上方的地图分开。我曾尝试将其删除，但这会使地图缩小到移动时消失。我想知道是否有任何方法可以使地图具有响应性，而无需底部填充？