0

Google マップをページの下部に配置したいのですが、挿入した数字に関係なく、左上隅に留まり、動きません。サイズを変更できますが、位置を移動できないようです。何か助けはありますか？

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

ページのフッター タグに 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

あなたの問題はCSSにあると思います。を持つ.iframe要素はclass="iframe"それらのプロパティを継承することを意味します。あなたが提供した html には、iframe のクラスがどこにもないように見えます。class="iframe"CSS を同じままにして 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%;
}

編集: あなたの質問をもう一度見て、問題を解決する可能性のある位置属性を変更するかどうかを確認するために、 position:{absolute, relative or fixed} を試すことをお勧めします。

于 2013-03-28T05:43:03.047 に答える
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 に答える