谷歌地图停留在左上角

我想将谷歌地图放在我的页面底部，但无论插入什么数字，它都会保留在左上角并且不会变动。我可以调整它，但我似乎无法移动定位。任何帮助？谷歌地图停留在左上角

HTML：

<iframe 
    marginwidth="0" marginheight="0" scrolling="no" width="422" height="300" 
    frameborder="0" scrolling="no" 
    src="https://maps.google.ca/maps?ie=UTF8&amp;cid=7805933538308657347&amp;q=Hibiscus&amp;gl=CA&amp;hl=en&amp;t=m&amp;z=16&amp;iwloc=A&amp;output=embed"> 
    </iframe>

CSS：

.iframe { 
    position: absolute; 
    padding-bottom: 65%; 
    padding-top: 30px; 
    overflow: hidden; 
    top: 8000px; 
    left: 400px; 
    width: 100%; 
    height: 100%; 
    }

来源

2013-03-25 user2208462

简单地讲的iframe在你的页面的页脚标签。

HTML

<html> 

<body> 
stuff... 
</body> 
<footer> 
<iframe style="width:100%; height:100%; position:absolute;" 
    marginwidth="0" marginheight="0" scrolling="no" width="422" height="300" 
    frameborder="0" scrolling="no" 
    src="https://maps.google.ca/maps?ie=UTF8&amp;cid=7805933538308657347&amp;q=Hibiscus&amp;gl=CA&amp;hl=en&amp;t=m&amp;z=16&amp;iwloc=A&amp;output=embed"> 
    </iframe> 
</footer> 
</html>

CSS

.iframe { 
position: absolute; 
padding-bottom: 65%; //65% padding-bottom is massive... are you sure you want that much? 
padding-top: 30px; 
width: 100%; 
height: 100%; 
//overflow:hidden; Why that? Doesn't do anything usefull in this situation. 
//left:400; Is it supposed to be 400px? If so, your page is pretty huge considering you have a map the size of your page. 
}

来源

2013-03-25 17:42:20 snaplemouton

我试过页脚标签，它似乎并没有工作。然而，我修复了400像素，填充和溢出。我把地图的宽度当作我的文本块，这就是它为什么是400px的原因。 – user2208462 2013-03-25 17:52:40

有没有其他的CSS可以修改你的iFrame？因为当我在w3school上测试这个“试试”时，它完美地起作用。你在使用母版页吗？确保页脚上的页脚标签是唯一的。右键单击您的页面并查看源代码以查看。 – snaplemouton 2013-03-25 17:59:16

我正在使用一个主外部CSS页面，除了上面所述的内容以外，没有其他内容是iframe的一部分。它适用于w3school和jfiddle，但我仍然不明白为什么它保持在顶部。 – user2208462 2013-03-25 18:17:57

既然要实现位置是绝对的，我想你可以只添加bottom:0;在iframe类，如果你希望它在的底部总是页

.iframe { 
    position: absolute; 
    bottom:0; 
    overflow: hidden; 
    left: 400px; <-- do you want to set margin on the left side of the map? 
    width: 100%; 
    height: 100%; 
    }

来源

2013-03-25 18:51:28

我认为你的问题在于你的CSS。你有一个.iframe这意味着任何元素class="iframe"将继承这些属性。你提供的html看起来并不像它有任何一类iframe。你可以保持你的CSS相同，并将class="iframe"添加到你的iframe中，或者在你的CSS中将.iframe改为iframe。个人而言，我会用.iframe去，并添加class="iframe"到iframe但我的类重命名为类似.google-maps

<iframe class="iframe" ...></iframe> 

iframe /*or*/ .iframe{ 
    position: absolute; 
    padding-bottom: 65%; 
    padding-top: 30px; 
    overflow: hidden; 
    top: 8000px; 
    left: 400px; 
    width: 100%; 
    height: 100%; 
}

编辑： 寻找你的问题又来我有一个建议，试图位置： {绝对，相对或固定}来查看是否更改可能解决您的问题的位置属性。

来源

2013-03-28 05:43:03 Class

谷歌地图停留在左上角

回答

相关问题