"Tela inteira" <iframe>

163

Quando uso o seguinte código para criar um iframe:

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

O iframe não percorre todo o caminho - uma "borda" branca de 10 px envolve o iframe. Como eu poderia resolver isso?

Aqui está uma imagem do problema:

Captura de tela do site

html iframe Trufa
fonte

Respostas:

103

O bodytem uma margem padrão na maioria dos navegadores. Experimentar:

body {
    margin: 0;
}

na página com o iframe.

kevingessner
fonte
300

Para cobrir toda a janela de exibição, você pode usar:

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

E não se esqueça de definir as margens da página emoldurada como 0, por exemplo body { margin: 0; },. - Na verdade, isso não é necessário com esta solução.

Estou usando isso com êxito, com um display:noneJS adicional e para mostrá-lo quando o usuário clicar no controle apropriado.

Nota: Para preencher a área de visualização dos pais em vez de toda a janela de visualização, mude position:fixedpara position:absolute.

Lawrence Dol
fonte
31
Esta resposta resolve como fazer iframe ocupar a tela inteira
Mark Ma
Você também pode usar comprimentos viewport-percentuais ..
Josh Crozier
2
A resposta aceita não funcionou para mim. isso fez. obrigado.
AlexVPerl
2
Ótima resposta! Simples, entre navegadores e definitivo.
Blankip #
Funciona perfeitamente com HTML 5
break7533
39

Você também pode usar os comprimentos de porcentagem da viewport para conseguir isso:

5.1.2 Comprimentos de porcentagem de viewport: as unidades 'vw', 'vh', 'vmin', 'vmax'

Os comprimentos de porcentagem da viewport são relativos ao tamanho do bloco inicial. Quando a altura ou largura do bloco inicial é alterada, elas são dimensionadas de acordo.

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

Isso é suportado na maioria dos navegadores modernos - o suporte pode ser encontrado aqui .

Josh Crozier
fonte
8

Use frameborder="0". Aqui está um exemplo completo:

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>
Hritik
fonte
7

Tente adicionar o seguinte atributo:

scrolling="no"
cmaxtech
fonte
5

Impossível dizer sem ver um exemplo ao vivo, mas tente dar aos dois corpos margin: 0px

Pekka
fonte
@ Trufa pode ser a margem, mas também pode ser outra coisa. É melhor usar a exibição "Layout" do Firebug para descobrir
Pekka
2

Você poderia tentar frameborder=0.

Novato
fonte
Obrigado, mas isso é "dentro do iframe". Eu precisava modificar a parte externa (eu não sabia até a resposta do @kevingessner) obrigado!
Trufa
2

Adicionar isso ao seu iframe pode resolver o problema:

frameborder="0"  seamless="seamless"
pentexnyx
fonte
1
@FABBRj Ótimo, eu poderia ajudar: D
pentexnyx
0

Eu criei um modelo de essência unindo algumas das respostas acima.

Ohad Cohen
fonte
-2

Use este código em vez dele:

    <frameset rows="100%,*">
        <frame src="-------------------------URL-------------------------------">
        <noframes>
            <body>
                Your browser does not support frames. To wiew this page please use supporting browsers.
            </body>
        </noframes>
    </frameset>
IşIk İşİtEn
fonte
7
Não há mais suporte no HTML5
Hari Karam Singh