Question

我有两个单独的<iframe>标记位于同一页面上。

它们都在<container> div中，每个<iframe>只显示每个页面的一部分。

问题是当我尝试将它们放在同一页面上时，尽管我设置了每个<iframe>的高度，但<iframe>底部与顶部<iframe>的高度相同明确地。

即使每个<iframe>设置为不同的高度，当我尝试将它们放在一起时，它会让事情变得混乱。

非常感谢任何帮助。谢谢！

这是我的代码：

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>

Answer 1

同一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 应放在不同网址的单独文档中，并在HTML文档的<link>部分的<head>标记中引用。如果您需要内联样式，最好将它们包含在<head>标记内的文档的<style>部分中。

我在jsfiddle中提供了这些更改的示例。

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

1 个答案: