Existe uma forma simples de auto-redimensionar um iframe e assim deixarmos de estar preocupados com a sua altura (a largura é definida manualmente).
A solução simples aqui apresentada funciona mas só se a página integrada no iframe estiver no mesmo domínio (ou sub-domínio) da página onde usamos o iframe. Uma outra limitação reside no facto de que o auto-redimensionamento de páginas intensivamente dinâmicas[1] pode também não funcionar.
A proposta consiste em usar um plugin do jQuery que se chama “Auto Set iFrame Height” e que pode obter AQUI. Este plugin consiste em dois scripts, um (o parent) que deve ser colocado na página Web que contém o iframe (ex.: principal.html) e o outro (o child) na página Web integrada nesse mesmo iframe (ex.: emoldurada.html).
Aqui vai o código para colocar no <head> da página principal.html:
<head>
...
<script src="path/até ao/autoSetIframeHeight/v2.1.1/dist/set-iframe-height-parent-min.js" async></script>
</head>
<body>
O código para colocar imediatamente antes da tag </body> da página integrada no iframe, emoldurada.html:
...
<script src="path/até ao/autoSetIframeHeight/v2.1.1/dist/set-iframe-height-child-min.js" async></script>
</body>
</html>
E agora um exemplo de um iframe situado na página principal.html:
<iframe src="path/até ao/emoldurada.html" scrolling="no" style="width:500px;height:auto;margin:0;padding:0;border:none;overflow:hidden;"></iframe>
