2放置在同一頁面上時，具有不同高度的iFrame顯示爲相同大小

我有兩個單獨的標記位於同一頁面上。2放置在同一頁面上時，具有不同高度的iFrame顯示爲相同大小

他們都在<container> div和每個只顯示每個頁面的一部分。

問題是，當我嘗試將它們放在同一頁面上時，底部與頂部的高度相同，即使我明確設置了每個的高度。

儘管每個都設置爲不同的高度，但當我嘗試將它們放在一起時，它會混淆視聽。

任何幫助將不勝感激。謝謝！

這裏是我的代碼：

HTML：

<div dir="ltr" style="text-align: left;" trbidi="on"> 
    <title></title> 
    <style type="text/css"> 
    <!-- 
     #container{ 
     width: 380px; 
     height: 360px; 
     overflow: hidden; 
     } 

     #container iframe { 
     width: 600px; 
     height: 475px; 
     margin-left: -15px; 
     margin-top: -90px; 
     border: 0; 
     } 
    --> 
    </style> 
    <div id="container"> 
    <iframe height="200" scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&amp;formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600"> 
    </iframe> 
    </div> 
</div> 

<div dir="ltr" style="text-align: left;" trbidi="on"> 
    <title></title> 
    <style type="text/css"> 
    <!-- 
     #container { 
     width: 400px; 
     height: 65px; 
     overflow: hidden; 
     } 

     #container iframe { 
     width: 600px; 
     height: 675px; 
     margin-left: -20px; 
     margin-top: -350px; 
     border: 0; 
     } 
    --> 
    </style> 

    <div id="container"> 
    <iframe height="200" scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027" width="600"> 
    </iframe> 
    </div> 
</div>

來源

2011-08-19 Mike

爲同一HTML文檔中的任何元素的id屬性的值必須是唯一的。您不應該在同一頁上有兩個<div>元素，其ID爲container。

如果您需要兩個元素具有相似的樣式，則可以在每個元素上使用相同的類屬性。

在這種情況下，您正在尋找不同的樣式，所以我的建議是更改每個容器div的id。

HTML：

<div dir="ltr" style="text-align: left;" trbidi="on"> 
    <title></title> 
    <div id="spreadsheet"> 
    <iframe scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&amp;formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600"> 
    </iframe> 
    </div> 
</div> 

<div dir="ltr" style="text-align: left;" trbidi="on"> 
    <title></title> 
    <div id="scores"> 
    <iframe scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027"> 
    </iframe> 
    </div> 
</div>

CSS：

#spreadsheet{ 
    width: 380px; 
    height: 360px; 
    overflow: hidden; 
} 

#spreadsheet iframe { 
     width: 600px; 
     height: 470px; 
     margin-left: -5px; 
     margin-top: -80px; 
     border: 0; 
     } 

     #scores { 
     width: 400px; 
     height: 65px; 
     overflow: hidden; 
     } 

     #scores iframe { 
     width: 600px; 
     height: 685px; 
     margin-left: -20px; 
     margin-top: -375px; 
     border: 0; 
     }

注：

的CSS最好應在各色一個被放置在一個單獨的文件nt URL並在HTML文檔的<head>部分的<link>標記中引用。如果您需要內聯樣式，則最好將它們包含在<style>標籤中文檔的<head>部分。

我已將這些更改的示例放在jsfiddle中。

來源

2011-08-27 23:01:47 mwolfetech

2放置在同一頁面上時，具有不同高度的iFrame顯示爲相同大小

回答

相關問題