2 кадра с разной высотой выглядят одинаково при размещении на одной странице - PullRequest
Новая
       2

2 кадра с разной высотой выглядят одинаково при размещении на одной странице

2 голосов
/ 19 августа 2011

У меня есть два отдельных тега <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>

1 Ответ

2 голосов
/ 28 августа 2011

Значение атрибута id для любого элемента в том же HTML-документе должно быть уникальным.У вас не должно быть двух <div> элементов с идентификатором container на одной странице.

Если вам нужно, чтобы два элемента имели одинаковые стили, вы можете использовать один и тот же атрибут класса для каждого из них.

В этом случае вам нужны разные стили, поэтому я рекомендую изменить идентификаторы для каждого элемента контейнера.

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 в идеале должно быть помещено вОтдельный документ по другому URL-адресу, указанный в теге <link> в разделе <head> вашего HTML-документа.Если вам нужно иметь встроенные стили, рекомендуется включить их в раздел <head> документа внутри тега <style>.

Я поместил пример этих изменений в jsfiddle .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...