Faire un iframe prendre un espace vertical

J'aimerais que l' iframe prenne autant d'espace vertical qu'il le faut pour afficher son contenu et ne pas afficher une barre de défilement. Est-ce possible?

Y a-t-il des solutions de contournement?

Cela devrait définir la hauteur IFRAME hauteur de son contenu:

 <script type="text/javascript"> the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight; document.getElementById('the_iframe').height = the_height; </script> 

Vous pouvez ajouter scrolling="no" à votre IFRAME pour éteindre les barres de défilement.

Edit: Oups, the_height déclarer the_height .

Vérifiez également ce fil: Comment le DiggBar redimensionne-t-il dynamiquement sa hauteur d'iframe en fonction du contenu qui n'est pas sur son domaine? .

Il répond à la même question.

Cet extrait CSS doit supprimer la barre de défilement verticale:

 body { overflow-x: hidden; overflow-y: hidden; } 

Je ne suis pas sûr encore de l'avoir pris autant d'espace vertical qu'il le faut, mais je verrai si je ne peux pas le comprendre.

L'ajout d'une déclaration DOCTYPE au document source IFRAME aidera à calculer la valeur correcte à partir de la ligne

 document.getElementById('the_iframe').contentWindow.document.body.scrollHeight 

Voir W3C DOCTYPE pour des exemples

J'avais des problèmes avec IE et FF car il rendait le document iframe en mode «curieuses», jusqu'à ce que j'ai ajouté le DOCTYPE .

Support FF / IE / Chrome: Le .scrollHeight ne fonctionne pas avec Chrome, j'ai donc proposé un exemple javascript en utilisant jQuery pour définir tous les hauteurs IFRAME sur une page en fonction du contenu iframes. REMARQUE: ceci concerne les pages de référence dans votre domaine actuel.

 <script type="text/javascript"> $(document).ready(function(){ $('iframe').each(function(){ var context = $(this); context.load(function(event){ // attach the onload event to the iframe var body = $(this.contentWindow.document).find('body'); if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents context.height($(body.get(0)).height() + 20); } else { context.hide(); // hide iframes with no contents } }); }); }); </script> 

La solution de contournement n'est pas d'utiliser <iframe> et de préprocesser le code sur le côté serveur.