Iframe height = 100% suportado em todos os navegadores?

Estou usando doctype como:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

No meu código iframe, se eu disser:

<iframe src="xyz.pdf" width="100%" height="100%" />

Quero dizer, ele realmente terá a altura da página restante (já que há outro quadro no topo com altura fixa de 50px) Isso é suportado nos principais navegadores (IE / Firefox / Safari)?

Também em relação às barras de rolagem, mesmo que eu diga scrolling="no", posso ver barras de rolagem desativadas no Firefox ... Como ocultar completamente as barras de rolagem e definir a altura do iframe automaticamente?

Você pode usar o conjunto de quadros como indica a resposta anterior, mas se insistir em usar os iFrames, os 2 exemplos a seguir deverão funcionar:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Uma alternativa:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Para ocultar a rolagem com 2 alternativas, como mostrado acima:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Corte com o segundo exemplo:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Para ocultar as barras de rolagem do iFrame, o pai é feito overflow: hiddenpara ocultar as barras de rolagem e o iFrame é feito com até 150% de largura e altura, o que força as barras de rolagem fora da página e como o corpo não possui barras de rolagem não se pode esperar que o iframe exceda os limites da página. Isso oculta as barras de rolagem do iFrame com largura total!

3 abordagens para criar uma tela cheia iframe:

• Abordagem 1 - Comprimentos de porcentagem da janela de visualização

  Nos navegadores suportados , você pode usar comprimentos de porcentagem da porta de visualização como height: 100vh.

  Onde 100vhrepresenta a altura da viewport e da mesma forma 100vwa largura.

  Exemplo Aqui

  body {
      margin: 0;            /* Reset default margin */
  }
  iframe {
      display: block;       /* iframes are inline by default */
      background: #000;
      border: none;         /* Reset default border */
      height: 100vh;        /* Viewport-relative units */
      width: 100vw;
  }

  <iframe></iframe>

  Executar snippet de códigoOcultar resultados

  Expandir snippet

• Abordagem 2 - Posicionamento fixo

  Essa abordagem é bastante direta. Basta definir o posicionamento do fixedelemento e adicionar um height/ widthde 100%.

  Exemplo Aqui

  iframe {
      position: fixed;
      background: #000;
      border: none;
      top: 0; right: 0;
      bottom: 0; left: 0;
      width: 100%;
      height: 100%;
  }

  <iframe></iframe>

  Executar snippet de códigoOcultar resultados

  Expandir snippet

• Abordagem 3

  Para este último método, basta definir o heightdos body/ html/ iframeelementos para 100%.

  Exemplo Aqui

  html, body {
      height: 100%;
      margin: 0;         /* Reset default margin on the body element */
  }
  iframe {
      display: block;       /* iframes are inline by default */
      background: #000;
      border: none;         /* Reset default border */
      width: 100%;
      height: 100%;
  }

  <iframe></iframe>

  Executar snippet de códigoOcultar resultados

  Expandir snippet

1. Altere seu DOCTYPE para algo menos rigoroso. Não use XHTML; é bobagem. Basta usar o doctype HTML 5 e você é bom:

<!doctype html>

2. Você pode precisar se certificar (depende do navegador) de que o pai do iframe tem altura. E seu pai. E seu pai. Etc:

html, body { height: 100%; }

Encontrei o mesmo problema, estava colocando um iframe em uma div. Tente o seguinte:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

A altura é definida como 100vh, que significa altura da janela de exibição. Além disso, a largura pode ser definida como 100vw, embora você provavelmente tenha problemas se o arquivo de origem for responsivo (seu quadro ficará muito amplo).

Isso funcionou muito bem para mim (apenas se o conteúdo do iframe vier do mesmo domínio ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

O seguinte trabalho testado

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

Adicional à resposta de Akshit Soota: é importante e definir explicitamente a altura de cada elemento pai, também da tabela e coluna, se houver:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>

Você primeiro adiciona css

html,body{
height:100%;
}

Este será o html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>

Aqui está um código conciso. Ele se baseia em um método jquery para encontrar a altura atual da janela. Ao carregar o iFrame, define a altura do iframe como a mesma da janela atual. Em seguida, para lidar com o redimensionamento da página, a tag body possui um manipulador de eventos de redimensionamento que define a altura do iframe sempre que o documento é redimensionado.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

aqui está uma amostra de trabalho: http://jsbin.com/soqeq/1/

Outra maneira de criar uma tela cheia fluida iframe:

O vídeo incorporado preenche todo viewport área quando a página é carregada

Boa abordagem para páginas de destino com vídeo ou qualquer conteúdo incorporado. Você pode ter qualquer conteúdo adicional abaixo do vídeo incorporado, que é revelado ao rolar a página para baixo.

Exemplo:

Código CSS e HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}

<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>

http://embedresponsively.com/

Este é um ótimo recurso e funcionou muito bem, nas poucas vezes em que o usei. Cria o seguinte código ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Só isso funcionou para mim (mas para "mesmo domínio"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

você pode usar:

MakeIframeFullHeight(document.getElementById("iframe_id"));

ou

<iframe .... onload="MakeIframeFullHeight(this);" ....

Conforme https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , os valores percentuais não são mais permitidos. Mas o seguinte funcionou para mim

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Embora width:100%funcione, height:100%não funciona. Então window.innerHeighttem sido usado. Você também pode usar pixels css para altura.

Código de trabalho: Link Site de trabalho: Link

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

Você pode chamar uma função que irá calcular o peso do corpo do iframe quando o iframe for carregado:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>