outubro 2nd, 2009 
Blog Admin Essa é quem para está passando horas procurando na Internet como gerar um iframe com 100% de altura que sirva para IE e FireFox. Normalmente esta solução aparece no google usando códigos em Javascprit, mas é muito simples fazer o mesmo efeito usando a propriedade block do CSS
Esse problema surgiu com o Mário, nosso Web-Designer que pegou o nosso sistema Financeiro para dar aquele “tapa” e eis que surge a necessidade de abrir o OS Ticket dentro de um Ifram com 100% de altura.
Vamos recorrer o Dr. Google, mas que perda de tempo, deixa pra lá… vamos pensar, se conseguimos criar um CSS para caixas de textos adicionando a propriedade block porque não aplicar o mesmo CSS em um iframe?
Eureca! Ao colocar a propriedade block em um iframe seu browser vai tratar o iframe como se ele fosse uma caixa de texto ou um textarea, se ele consegue tratar dessa forma, o uso do height:100% se torna fácil, veja um exemplo;
<html>
<head>
<title>iframe example</title>
<style type=”text/css”>
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body>
<div>
<iframe src=”http://inhosting.com.br/”>
<p><a href=”http://inhosting.com.br”>http://inhosting.com.br</a></p>
</iframe>
</div>
</body>
</html>
Simples não?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>iframe example</title> <style type="text/css"> html, body, div, iframe { margin:0; padding:0; height:100%; } iframe { display:block; width:100%; border:none; } </style> </head> <body> <div> <iframe src="http://example.org/"> <p><a href="http://example.org/">example.org</a></p> </iframe> </div> </body> </html>
Posted in 
Tags: 
Muito simples. Parabéns
Não funcionou comigo, pelo menos no IE 8
Dentro de Tabelas nao funciona.
WTF… ontem passei o dia todo procurando isto!
só dava javascript mal feito ou dificil de entender!
agora este codigo css… nossa simples e perfeito! x)
valeu ai cara! foi muito util isto pra eu!
Eu uso um layout fazendo float em div….
o iframe nunca se ajusta ao tamanho da pagina da pagina frame!
ele sempre se ajusta aos limites da tela… tipo 1028×720 px
ele pega 720 px de altura! u_u e fica com scroll!
complicado! estou sofrendo aqui :B rsrs
cara perfeito!!! funcionou!! depois de tanto tempo procurando isso!!!vlw cara!!!
Funcionou perfeitamente, parabéns! Passei dias procurando essa solução!
Porém, como faço para aplicar a apenas uma certa div? Porque desta forma todas as minhas outras divs sæm do lugar.
Abraços.
Não funcionou comigo tambem.
nao funciono
Baita dica parceiro, valeu mesmo!
Pra quem não funcionou… sobra o javascript mesmo.
Your browser does not support iframes.
Muito bom mesmo!
Mas tenho vários iframes na minha página.
Como faço para aplicar apenas a dois deles?
Obrigado
Raul, infelizmente esse spcrit foi feito para suportar apenas um iframe, você terá que realizar alguns testes mais creio que não funcione. um grande abraço e obg pela visita.
Marcio obrigado pela visita, mas pela mensagem o problema é com o seu navegador, já tentou experimentar em outro? Seu acesso a internet é sob proxys? talvez seja o proxy, esse problema é comum em alguns sistemas de proxys. Um grande abraço
Obrigado pela visita Gabi. Esse script realmente foi desenvolvido para suportar apenas um iframe.
Aqui funcionou!
/* – CSS – */
* {
list-style-type:none;
text-decoration:none;
padding:0;
margin:0;
height:100%;
}
#iframebox {
display:block;
width:100%;
border:none;
}
[iframe id='iframebox' frameborder='0' scrolling='no' src='http://yamoosblog.blogspot.com/' ]
Perfeito!
Meo Deus
tava no google loco procurando por codigo javascript, e o seu me resolveu muito mais facil e elegante.
um post de 2 anos atraz conseguiu me ajudar muito
muito obrigado.
No Firefox funciona perfeitamente. Mas no IE de jeito nenhum.
Se souber alguma maneira pra funcionar no IE, comenta ae.
Abç.
Embora seja simples, limpo e muito bom, infelizmente o código não funciona para todos os navegadores, devido aos interpretadores de cada um deles.
Por exemplo, no FireFox 11 ou superior, o iframe se extende horizontalmente, mas não verticalmente. No entando se você coloca um valor fixo, ele já funciona perfeitamente.
São problemas de navegador para navegador, que devem ser solucionados de outras formas.
Se nenhuma tecnologia funcionar, tente evitar o uso do iframe, a menos que realmente seja necessário.