Página inteira <iframe>

97

Eu tenho o código de exemplo abaixo. Isso funciona bem com todos os navegadores, exceto para navegadores em dispositivos móveis.

A tag de estouro é o problema.

Funciona com todos, exceto para celular:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Funciona com todos os dispositivos móveis e não com computadores:

margin: 0; padding: 0; height: 100%;

Qual é a melhor maneira de fazer funcionar em ambos?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>
html css iframe Lacer
fonte
Por que não redirecionar apenas para cnn.com?
GolezTrol
cnn.com é mais um exemplo. para mostrar o comportamento que estou tentando prevenir.
Lacer
basta adicionar <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ao cabeçalho do html que o contém e a capacidade de resposta estará de volta (pelo menos parcialmente).
Nukey

Respostas:

171

Aqui está o código de trabalho. Funciona em navegadores de desktop e móveis. espero que ajude. obrigado por todos responderem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>
Lacer
fonte
2
cuidado, quando eu quis colocar um iframe acima - houve um problema no Chrome. Eu adicionei o fechamento </iframe> e funciona
Michal - wereda-net
Parece que está tirando a capacidade de resposta (ou seja, colapso de colunas etc.) do conteúdo dentro do iframe. Mas de alguma forma, apenas ao abrir a página com o safari móvel, não ao redimensionar um navegador de desktop. Alguma ideia do que poderia causar esse comportamento?
psteinweber
3
@psteinweber, você só precisa adicionar <meta content='width=device-width, initial-scale=1.0' name='viewport'>à página que o contém.
apenas
Tive que usar em vwvez das propriedades %for widthe height para obter o alinhamento adequado no Chromium 81. Caso contrário, funciona perfeitamente.
Josh Habdas
18

Este é um navegador cruzado e totalmente responsivo:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>
Tawsif Torabi
fonte
7

Coloque isso em seu CSS.

iframe {
  width: 100%;
  height: 100vh;
}
shoriwa-shaun-benjamin
fonte
3

Isso é o que eu usei no passado. 

html, body {
  height: 100%;
  overflow: auto;
}

Também em iframeadicionar o seguinte estilo

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
fonte
obrigado pela resposta, mas é essencialmente o que eu tenho, então não funciona. No navegador móvel, ele corta qualquer coisa que esteja excedendo e não permite que você role.
Lacer
@Lacer Tente substituir overflow: hiddenporoverflow: auto
Jay Patel
tentei isso. no navegador móvel ainda o corta e nos navegadores desktop causa rolagem dupla
Lacer
não, ainda a rolagem dupla no navegador de desktop e é interrompida em navegadores de celular
Lacer
2

Para redirecionamentos de quadro em tela inteira e coisas semelhantes, tenho dois métodos. Ambos funcionam bem em dispositivos móveis e computadores.

Observe que estes são arquivos HTML válidos e completos para vários navegadores. Basta mudar titlee srcpara suas necessidades.
Você pode descartar <meta charset>se não tiver caracteres não ASCII.

1. este é o meu favorito:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

ou 2. algo assim , um pouco mais curto:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>


Observação :
para ser conservador, os exemplos acima evitam o uso height:100vhporque os navegadores antigos não sabem disso (talvez discutível atualmente) e height:100vhnem sempre é igual aos height:100%navegadores móveis (provavelmente não aplicável aqui). Caso contrário, vhsimplifica um pouco as coisas, então

3. este é um exemplo usando vh (não é meu favorito, menos compatível com pouca vantagem)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
jj
fonte