Isso não é possível via CSS pois ele somente altera o estilo dos elementos, não interpreta seus valores. O height: 100%
faz com que o elemento (no caso, o iframe) tenha 100% de altura em relação à janela que está exibindo o site. Para alcançar seu objetivo, você precisa manipular o elemento após ele ser carregado.
Utilizando jQuery podemos saber quando o iframe termina de ser carregado, e então após isso, podemos mudar sua altura:
$("iframe").on('load', function() {
// Pega a altura total do documento do iframe
var newHeight = $("iframe").contents().find("body").height() + "px";
$("iframe").css('height', newHeight);
});
É importante notar que a obtenção dos elementos de dentro de um iframe só é possível caso o site que você esteja abrindo no iframe esteja no mesmo domínio que o seu. Por esse motivo eu não pude hospedar o exemplo no JSFiddle, então deixei em uma pasta em meu site para você poder analisar melhor:
http://rafaelalmeidatk.com/demos/so/56902-teste_iframe/
Observação:
Não coloque o código dentro de uma função $(document).ready([...]
, pois ao apertar F5, o iframe irá voltar para o tamanho inicial e o código não será executado. Para resolver isso, deixe o código fora de qualquer escopo.
1820px
de height no iframe, com isso fica sobrando espaço na postagem até não querer mais. Seria ideal se eu usasse uma tela de240px (X)
; mas no PC não rola, fica muito espaço em branco. Eu consigo modificar os atributos do iframe, mas não consigo adaptar ele ao que tem """dentro dessa tag"""... por exemplo, adicionar umheight: 100%
, isso não funciona, tentei diversas coisas e nenhuma deu certo.