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
— 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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.