расположение в два столбца, высота левого столбца ограничивает высоту правого столбца, не знаю почему ...? - PullRequest
Новая
       17

расположение в два столбца, высота левого столбца ограничивает высоту правого столбца, не знаю почему ...?

1 голос
/ 11 мая 2009

Я немного застрял, это из-за моей неопытности с html / css и iframes.

По сути, у меня есть столбец LH, который является моим меню. и колонка RH, дом которой мой контент. столбец RH - это iframe.

Проблема в том, что я не могу получить высоту iframe равной 100%, это ограничено высотой столбца LH.

см. Ниже; http://www.therussianfrostfarmers.com/

это сводит меня с ума, кажется, это легко исправить.

Вот часть соответствующего HTML; 

<div id='wrapper'>
          <div id='header'>
                 <img src="images/titleBart.gif" alt="rff"/>
          </div>

          <div id='menu'>
                 <div class='container'>
                          <%obj_itop%>
                          <plug:front_index />
                          <%obj_ibot%>
                 </div> 
          </div>    

          <div id='content'>
                          <!-- text and image -->
                          <plug:front_exhibit />
                          <!-- end text and image -->
          </div>

          <div class='clear-both'>
                 <!-- -->
          </div>
</div>

и соответствующий ему CSS; 

#wrapper { 
    margin: 0 auto;
    width:950px; 
    text-align: left; 
    background: #fff; 
    height:100% !important;
} 

.clear-both { clear: both; }

#content {
    width: 760px;
    margin: 20px 0 0 190px;
    padding:0;
    height: 100% !important;
    overflow: auto;
}

#menu {
    width: 170px;
    position:absolute; 
    margin:0;
    padding:0;
    overflow: auto;
}

.container {  
    margin:0;
    padding:0;
}

Любая помощь будет высоко ценится,

спасибо, камера

Ответы [ 3 ]

1 голос
/ 11 мая 2009

Я не уверен на 100% в этом, но я совершенно уверен, что нет способа сделать это без использования JavaScript для динамического изменения размера iFrame. А если и есть, то, вероятно, это будет нелегко.

Это происходит потому, что «100%» в терминах CSS занимает только столько места, сколько может того, что уже есть на странице . Поскольку у вас уже есть левый столбец, 100% будет соответствовать только размеру этого столбца.

0 голосов
/ 11 мая 2009

хорошо, я полагаю, что к iframe уже применена такая функция JS; 

<script type='text/javascript'>
function iframer() 
{ 
// get width of #content 
frame_x = $('#content').width(); 
// get height of #menu 
frame_y = $('#menu').height(); 

// apply height and width 
$('#iframed').css('width', frame_x); 
$('#iframed').css('height', frame_y); 
} 

$(document).ready( function() { iframer(); } );
$(window).resize( function() { iframer(); } );
</script>

<iframe src='$url' frameborder='0' id='iframed'></iframe>
EOH;

    return $iframe;

если я изменю высоту #menu на 50% и выделю серый BG, то будет проще увидеть, как div #menu влияет на высоту #content div.

http://www.therussianfrostfarmers.com/

0 голосов
/ 11 мая 2009

Размер iFrame нужно будет изменить с помощью javascript - вы можете сделать это довольно легко, используя что-то вроде следующего: 

<body onload="resizeFrame(document.getElementById('myframe'))">

  <iframe id="myframe" src="http://www.example.com/foo.html" />

  <script type=”text/javascript”>
    function resizeFrame(f) 
    {
      // Get height of iframe once it has loaded content and then
      // use this for the iframe height in parent doc
      f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
    }
  </script>

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

Обратите внимание, что вышесказанное будет работать, если ваш контент iframed находится в том же домене, что и содержащая страница. Если это не так, вы столкнетесь с ограничениями безопасности из-за политики того же источника , которая немного сложнее обойти !

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

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

...