Question

我想在我的页面底部放置谷歌地图，但无论我插入什么数字，它都会保持在左上角并且不会让步。我可以调整它的大小，但我似乎无法移动定位。有帮助吗？

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%;
    }

Answer 1

只需将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.
}

Answer 2

由于您正在实施绝对位置，我想您可以在iframe类中添加bottom:0;，如果您希望它始终位于页面底部

.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%;
    }

Answer 3

我认为你的问题在于你的CSS。您有一个.iframe，这意味着class="iframe"的任何元素都会继承这些属性。你提供的html看起来不像任何一类iframe。您可以保持CSS相同，并将class="iframe"添加到您的iframe，或将.iframe更改为CSS中的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%;
}

修改再次查看你的问题我有一个建议尝试位置：{absolute，relative或fixed}来查看是否更改了可能解决问题的位置属性。

谷歌地图停留在左上角

3 个答案: