Как сделать ширину и высоту iframe такой же, как и ее родительский div?

У меня есть iframe внутри div. Я хочу, чтобы размер iframe был точно размером с родительским div. Я использовал следующий код для установки ширины и высоты iframe.

<iframe src="./myPage.aspx" id="myIframe" 
    style="position: relative; 
            height: 100%; 
            width: 100%' 
            scrolling='no' 
            frameborder='0'">

Но ширина iframe не такая же, как div, также отображаются горизонтальная и вертикальная полосы прокрутки.

Ответ 1

у вас много опечаток.

правильная разметка должна выглядеть следующим образом:

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
    style="position: relative; height: 100%; width: 100%;">
...
</iframe>

также, если этот кадр уже имеет идентификатор, почему бы вам не поместить это в CSS, как это (из отдельного файла таблицы стилей):

#myIframe
{
    position: relative;
    height: 100%;
    width: 100%; 
}

и HTML

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>

помните, что scrolling и frameborder являются атрибутами iframe, а не style.

Ответ 2

Поскольку мы находимся в возрасте CSS3, вы можете сделать это, используя единицы просмотра. Эти блоки позволяют указывать размеры в процентах от ширины окна просмотра и высоты видового экрана. Это окно просмотра пользователя, также называемое экраном. Однако во всех основных браузерах я пробовал это, если вы помещаете iframe внутри div, который находится внутри другого div и расположенного родственника, единицы просмотра относятся к этому div. И поскольку 100 единиц высоты видового экрана означают высоту 100%, вы можете сделать так:

<div id="parent">
    <div id="wrapper" style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
    </div>
</div>

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

И самое главное, он работает на всех браузерах, даже мобильных (проверенных на Android и iphone)!

Ответ 3

Чтобы установить динамическую высоту -

Нам нужно общаться с междоменными iFrames и родительскими
Затем мы можем отправить высоту/высоту прокрутки iframe в родительское окно

1 Для связи

Я предпочитаю - https://ternarylabs.github.io/porthole/

2 Реализация

Чтобы определить изменение высоты iframe - Использует https://marcj.github.io/css-element-queries/

<script src="https://raw.githubusercontent.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://raw.githubusercontent.com/ternarylabs/porthole/master/src/porthole.min.js"></script>

Для остальной части реализации см. gist -

https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

Родительское окно:

(function(){

'use-strict';

//This soultion we have used  - https://ternarylabs.github.io/porthole/
// example - 

var iFrameId: 'guestFrame',
window.onload = function(){
    // Create a proxy window to send to and receive
    // messages from the iFrame
    var windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/', iFrameId);

    var $viewPort = $('#'+iFrameId);
    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(messageEvent) {
      
      if( messageEvent.data.height == $viewPort.height() ){
        return;
      }
  		$viewPort.height(messageEvent.data.height);
  	});

    Porthole.WindowProxyDispatcher.start();
};


})();