Iframe em tela cheia com uma altura de 100%

238

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?

javascript html css iframe html-frames testndtv
fonte
14
Veja na verdade eu não tenho todos os navegadores installed..Also diferente versions..also só queria garantir que ele é uma espécie de padrão ..
testndtv
1
Você também pode experimentá-lo em um validador de css.
Ruben
6
Sim, isso não gera nenhum erro / aviso ... Mas minha pergunta é: todos os navegadores realmente aplicam 100% de altura?
Testndtv 3/05
Para mim, esta resposta funcionou bem: stackoverflow.com/questions/5272519/…
Zied Hamdi

Respostas:

276

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!

Machado
fonte
3
Parece bom ... Apenas uma pergunta ... Por que precisamos usar style = "height: 100%; width: 100%;" quando estamos de qualquer maneira dizendo iframe height = "100%" width = "100%"
testndtv
1
Também a apenas IE não está tomando 100% altura (leva cerca de 200px ht) ... FF e Safri levar toda a altura restante ..
testndtv
@Boris Zbarsky Sim, obrigado por me informar isso! Eu atualizei a postagem agora !! Sua primeira pergunta sobre as tags duplas é que os navegadores anteriores usam as tags "height" e "width", mas não funcionam bem com as tags de estilo! Sobre o bug do IE, eu preferiria que você seguisse o primeiro código desse caso.
Ax
15
Para que o iframe use corretamente 100%, o pai precisa ser 100%. Nos doctypes mais recentes, o html e a tag body não são automaticamente 100%. Quando adicionei height: 100% para html e body, funcionou perfeitamente. Portanto, acho que a resposta correta para a pergunta é a resposta de Rudie, exceto que eu tive que manter meu doctype xhtml. Além disso, observe que as regras de estouro não são necessárias. As barras de rolagem funcionam como pretendido - automaticamente.
Spiralis
3
Esta resposta SO também é muito curta e agradável.
Uwe Keim
164

3 abordagens para criar uma tela cheia iframe:

  • 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>
    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>
    Expandir snippet

Josh Crozier
fonte
4
Acabei usando uma variação da opção 1 ... Usei width: 100% e height: 100vh porque a fonte que eu estava puxando era bastante larga e o iframe está contido em uma div. Excelente solução. Obrigado.
NotJay
2
adicionar display: blockfez o truque para evitar ter uma barra de rolagem dupla
KavenG
45

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%; }
Rudie
fonte
9
A parte importante aqui para mim foi que o html e a tag body precisavam de altura: 100%. Obrigado.
Spiralis
1
Definir apenas o corpo funciona no Chrome, mas não em outros navegadores.
Dingle
Aqui estão duas abordagens alternativas .
Josh Crozier
36

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

NotJay
fonte
3
perfeita não é suportado em qualquer navegador, tanto quanto eu sei
VisualBean
1
Depois de passar mais tempo do que eu gostaria de admitir, mexendo com esse problema, é exatamente isso que eu precisava. Exceto em vez de um site, eu usei outro arquivo HTML, que exigia um pequeno ajuste na altura da janela de exibição e agora é bom começar. Obrigado!
Thomas Jacobs
29

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>
Ivan
fonte
21
Isso funcionará apenas se iframe srcestiver no mesmo domínio da página pai, caso contrário, você receberá um erro de permissão negada contentWindow.document.
wolfyuk
Demorei um pouco para fazer isso funcionar dentro do Wordpress, acabei de adicionar um código curto no meu plugin. FUNCIONA COMO UM ENCANTO.
214 Andy Andy
Funciona. mas o problema é que não será recalculado a altura em cada postagem interna do iframe. Existe alguma solução alternativa?
Behrouz.M
7 

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

khoa
fonte
6

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

Heitor Giacomini
fonte
4

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>
Uma Shankar Goel
fonte
1
Já existem 14 outras respostas aqui. Você pode explicar como sua resposta é melhor ou pelo menos diferente das outras 14?
Stephen Rauch
2

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>
Brabbeldas
fonte
2

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>
Tariq Javed
fonte
1

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/

BraveNewMath
fonte
0

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

DAH
fonte
Observe que você pode precisar de algum javascript para Firefox. Há um problema comum com a altura do iframe no Firefox.
DAH
0

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>
Tom Witherington
fonte
0

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);" ....
T.Todua
fonte
0

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

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

</iframe>
blueDexter
fonte
0

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=...>
Tejpal Sharma
fonte