Заставить адаптироваться iframe в зависимости от изменений

[bork75]

Этот html код выводит инфрейм с прокруткой, убрав прокрутку при переходе по страницам содержимое в фрэме будет отображена на половину

вот решение без скриптов

<style>

* {margin:0; padding:0;}

.iframe-html {position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.iframe-html iframe {position:absolute;top:0;left:0;width:100%;height:100%; height: calc(100% - 40px)}

</style>  

<div class="iframe-html">
   <iframe width="100%" height="100%" frameborder="0" src="http://nic.ru" name="fff" align="left" border="0"></iframe>
</div>

Другой вариант

<style>

* {
   margin:0;
   padding:0;
}

html {
  height: 100%;
}
 
body {
height: 100%;
position: relative;
overflow: hidden;

}

.a {width:100%; height:100%;}
iframe {width:100%; height:100%; border:none;}
.block_iframe {margin-top:200px; width:100%; height:100%; height: calc(100% - 200px);}


</style>  

<div class="a">
     <div class="block_iframe">
       <iframe class="iframe-content" frameborder="0" src="http://nic.ru" name="fff" align="left" border="0"></iframe>
     </div>
</div>

 

[Absolute]

Первый и второй вариант работают, спасибо огромное, но в конце ифрейма последняя строка урезается, можно ли добавить в скрипте + 30 или 40 height? т.е. чтобы адаптированная рамка была чуть ниже чем она щас?

Заменить frameBody.height() на
frameBody.height() - 40
$(this).height() то же самое:
$(this).height() - 40

Это убавит высоту фрейма на 40px . Но вообще, если можно обойтись с помощью css, то это лучше.

 

[Zacker2]

Для просмотра ссылки Войди или Зарегистрируйся не сработало, первый вариант ничего не вывел на страницу, второй с большим отступом вывел половину инфрейм, видимо не сработался с css wp.

Заменить frameBody.height() на
frameBody.height() - 40
$(this).height() то же самое:
$(this).height() - 40

Это убавит высоту фрейма на 40px . Но вообще, если можно обойтись с помощью css, то это лучше.

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

Я пробовал и так:

   frameEl.height(frameBody.height());
   frameBody.on('click', function(){
     frameEl.height($(this).height() + 40);

и так:

   frameEl.height(frameBody.height() + 40);
   frameBody.on('click', function(){
     frameEl.height($(this).height());

Результат не изменился...

 

[Absolute]

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

Так если изначально лишние 40px, то разве не логично убавить высоту на эти 40px? Или я что-то не совсем понял?

<script>
$(document).ready(function(){
var fr = $('iframe');
fr.load(function(){
   var frameEl = $(this),
       frameBody = $(this.contentDocument.body);
   frameEl.height(frameBody.height() - 40); // высота кот. установ. при загрузке
   frameBody.on('click', function(){
     frameEl.height($(this).height() - 40); // высота кот. установ. при клике внутри фрейма
   });
  });
});
</script>

 

[Zacker2]

не лишние, 30-40 не хватает...

 

[Absolute]

не лишние, 30-40 не хватает...

Попробуйте обнулить padding и margin:

<script>

$(document).ready(function(){
var fr = $('iframe');
fr.load(function(){
   var frameEl = $(this),
       frameBody = $(this.contentDocument.body);
       frameBody.css({
       'padding' : 0,
       'margin' : 0
       });
   frameEl.height(frameBody.height());
   frameBody.on('click', function(){
     frameEl.height($(this).height());
   });
  });
});
</script>

 

[Zacker2]

Поставил бы еще 1000 лайков, заменил на этот, и все заработало как нужно, без всяких +40 и.т.д Спасибо Огромное...

 

[Absolute]

Поставил бы еще 1000 лайков, заменил на этот, и все заработало как нужно, без всяких +40 и.т.д Спасибо Огромное...

Идею с css тоже рассмотрите. Если какие-то другие стили перекрывают вариант, предложенный Для просмотра ссылки Войди или Зарегистрируйся, то можно вписать стили с помощью атрибута style прямо в элементы - для браузеров эти стили имеют самый высокий приоритет применения. Т.е.

<iframe style="position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;" src="http://nic.ru"></iframe>

 

[Zacker2]

Если брать первый вариант,

<style>


</style>

<div class="iframe-html">
<iframe width="100%" height="100%" frameborder="0" src="http://nic.ru" name="fff" align="left" border="0"></iframe>
</div>

то получается так?

<iframe style="margin:0;padding:0;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;" src="http://nic.ru"></iframe>

Если да, то тоже выводиться примерно 10px верхней части фрейма

 

[bork75]

Для просмотра ссылки Войди или Зарегистрируйся не сработало, первый вариант ничего не вывел на страницу, второй с большим отступом вывел половину инфрейм, видимо не сработался с css wp.

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

Сам сейчас собираю сайт с ифреймами по первому примеру.
Всё работает отлично, тестировал на всех популярных браузерах и на мобильниках.