Para realizar esta façanha, seguir os seguintes passos:
Na página conteúdo ( que ficará dentro do iframe )
Colocar o seguinte código.
<body onload="atualizaIframe();">
criar uma div com o nome "container" , para assim , conseguir pegar a altura total, para assim, alterar o height do iframe da página pai.
função JavaScript:
function atualizaIframe() { var tamanho = document.getElementById("container").offsetHeight; parent.document.getElementById("ifrm").style.height = tamanho; }
Na página pai (parent), onde ficará o iframe
colocar o código do iframe.Não esquecer de setar a propriedade scrolling para "no" e definir o id do iframe para "ifrm" no caso da função javascript atual, se quiser alterar o nome, alterar na função também
<iframe width="100%" scrolling="no" height="600px" frameborder="0" id="ifrm" allowtransparency="true" heigth="100%" marginwidth="10" marginheight="0" style="padding: 0pt; margin: 0pt; height: 10111px;" src="http://paginafilha/conteudo"> </iframe>
Pronto, de acordo com o crescimento do conteúdo, a altura do iframe aumenta também.
Outra solução: http://stackoverflow.com/a/9976309/1607490
Ambas soluções funcionam somente se o os conteúdos estiverem no mesmo domínio! mais informações sobre isto em: Same Origin Policy