0

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

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

3 回答 3

0

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

编辑： 再次查看您的问题，我建议尝试 position:{absolute, relative or fixed} 以查看是否更改可能解决您的问题的位置属性。

于 2013-03-28T05:43:03.047 回答
0

只需将 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-25T17:42:20.813 回答
0

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-25T18:51:28.607 回答