谷歌地圖停留在左上角

我想將谷歌地圖放在我的頁面底部，但無論插入什麼數字，它都會保留在左上角並且不會變動。我可以調整它，但我似乎無法移動定位。任何幫助？谷歌地圖停留在左上角

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

谷歌地圖停留在左上角

回答

相關問題