Iframe em tela cheia com uma altura de 100%
Iframe height = 100% suportado em todos os navegadores?
Estou usando doctype como:
No meu código iframe, se eu disser:
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?
— testndtv
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 ..
Você também pode experimentá-lo em um validador de css.
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
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:
Para ocultar a rolagem com 2 alternativas, como mostrado acima:
Corte com o segundo exemplo:
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!
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%"
Também a apenas IE não está tomando 100% altura (leva cerca de 200px ht) ... FF e Safri levar toda a altura restante ..
@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.
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
Esta resposta SO também é muito curta e agradável.
3 abordagens para criar uma tela cheia iframe:
Abordagem 1 - Comprimentos de porcentagem da janela de visualização
Nos navegadores suportados , você pode usar comprimentos de porcentagem da porta de visualização como height: 100vh.
Onde 100vhrepresenta a altura da viewport e da mesma forma 100vwa largura.
Abordagem 2 - Posicionamento fixo
Essa abordagem é bastante direta. Basta definir o posicionamento do fixedelemento e adicionar um height/ widthde 100%.
Para este último método, basta definir o heightdos body/ html/ iframeelementos para 100%.
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
adicionar display: blockfez o truque para evitar ter uma barra de rolagem dupla
1. Altere seu DOCTYPE para algo menos rigoroso. Não use XHTML; é bobagem. Basta usar o doctype HTML 5 e você é bom:
2. Você pode precisar se certificar (depende do navegador) de que o pai do iframe tem altura. E seu pai. E seu pai. Etc:
A parte importante aqui para mim foi que o html e a tag body precisavam de altura: 100%. Obrigado.
Definir apenas o corpo funciona no Chrome, mas não em outros navegadores.
Aqui estão duas abordagens alternativas .
Encontrei o mesmo problema, estava colocando um iframe em uma div. Tente o seguinte:
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).
perfeita não é suportado em qualquer navegador, tanto quanto eu sei
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
Isso funcionou muito bem para mim (apenas se o conteúdo do iframe vier do mesmo domínio ):
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?
— Heitor Giacomini
O seguinte trabalho testado
— Uma Shankar Goel
Já existem 14 outras respostas aqui. Você pode explicar como sua resposta é melhor ou pelo menos diferente das outras 14?
Adicional à resposta de Akshit Soota: é importante e definir explicitamente a altura de cada elemento pai, também da tabela e coluna, se houver:
— Brabbeldas
Você primeiro adiciona css
Este será o html:
— Tariq Javed
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.
aqui está uma amostra de trabalho: http://jsbin.com/soqeq/1/
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.
Código CSS e HTML.
Observe que você pode precisar de algum javascript para Firefox. Há um problema comum com a altura do iframe no Firefox.
Este é um ótimo recurso e funcionou muito bem, nas poucas vezes em que o usei. Cria o seguinte código ....
— Tom Witherington
Só isso funcionou para mim (mas para "mesmo domínio"):
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
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
— blueDexter
Você pode chamar uma função que irá calcular o peso do corpo do iframe quando o iframe for carregado: