Tengo un iframe dentro de un div. Quiero que el tamaño del iframe sea exactamente del tamaño de su div principal. Usé el siguiente código para establecer el ancho y la altura de iframe.

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

Pero el ancho de iframe no es lo mismo que div, también se muestran la barra de desplazamiento horizontal y vertical.

tienes un montón de errores tipográficos.

un marcado correcto debería ser como:

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

además, si este marco ya tiene una identificación, ¿por qué no pones esto en CSS así (de un archivo de hoja de estilo separado):

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

y HTML

<iframe src="https://stackoverflow.com/questions/18765762/./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>

importa eso scrolling & frameborder son iframe atributo, no style atributo.

Dado que estamos en la era de CSS3, puede hacerlo utilizando unidades de ventana gráfica. Estas unidades le permiten especificar tamaños en términos de porcentajes del ancho y la altura de la ventana. Esta es la ventana gráfica del usuario, también conocida como pantalla. Sin embargo, en todos los principales navegadores que he probado, si coloca un iframe dentro de un div, que está dentro de otro div y se coloca en relación, las unidades de la ventana gráfica son relativas a este div. Y dado que 100 unidades de altura de ventana gráfica significan 100% de altura, puede hacer lo siguiente:

<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>

Creo que esta es la mejor solución posible, ya que es dominio cruzadoy se muestra exactamente como lo desea sin javascript u otras cosas complejas.

Y lo más importante, funciona en todos los navegadores, ¡incluso en los móviles (probado en Android y iPhone)!

Para establecer la altura dinámica –

1. Necesitamos comunicarnos con iFrames de dominio cruzado y padre
2. Luego podemos enviar la altura de desplazamiento/altura del contenido del iframe a la ventana principal

1 para la comunicación

Yo prefiero – https://ternarylabs.github.io/porthole/

2 Implementación

Para detectar el cambio de altura del iframe – Usos 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>

Para el resto de la implementación, consulte la esencia –

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

Ventana principal:

(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();
};


})();

ventana iframe:

(function(){

'use-strict';

/**
 * Iframe to Parent window communication
 * sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
 * </iframe>
 * Uses https://ternarylabs.github.io/porthole/
 * Uses https://marcj.github.io/css-element-queries/  
 */
window.onload = function(){

  var proxy = window.proxy  = new Porthole.WindowProxy('http://parent-domain.com/');
  proxy.addEventListener(function(messageEvent) {
      // handle event
  });

  //Height setup
  var iframeHeight = 0;
  
  var element = document.getElementsByTagName("BODY")[0];
  new ResizeSensor(element, function() {
    
    var scrollHeight = $('body').outerHeight();
    if (iframeHeight === scrollHeight) return false;
    
    iframeHeight = scrollHeight;
    proxy.post({
      height: scrollHeight,
    });
    
  });

  Porthole.WindowProxyDispatcher.start();

};

})();