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>

答

为同一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中。

2放置在同一页面上时，具有不同高度的iFrame显示为相同大小

相关推荐