Loading
carregando...

IFRAME com height de 100% com um simples CSS (I.E e Firefox)


Essa é para quem 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

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;

  1.  
  2. <html>
    
  3.   <head>
    
  4.   <title>iframe example</title>
    
  5.   <style type="text/css">
    
  6.    html, body, div, iframe { margin:0; padding:0; height:100%; }
    
  7.    iframe { display:block; width:100%; border:none; }
    
  8.   </style>
    
  9.   </head>
    
  10.   <body>
    
  11.       <div>
    
  12.          <iframe src="http://inhosting.com.br/">
    
  13.          <p><a href="http://inhosting.com.br">http://inhosting.com.br</a></p>
    
  14.          </iframe>
    
  15.       </div>
    
  16.    </body>
    
  17. </html> 
    
  18.  


Simples não?


Fonte: http://inhosting.com.br/blog/2009/10/02/iframe-com-height-de-100-com-um-simples-css-i-e-e-firefox/comment-page-1/#comment-3635


Autor: Dárcio Gomes
Data: 30/08/2012 00:00:00