"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

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