Faire un iframe prendre de l'espace vertical

Question

Je souhaite qu'un iframe prenne autant d'espace vertical que nécessaire pour afficher son contenu et n'affiche pas de barre de défilement. Est-ce possible?

Y a-t-il des solutions de contournement?

Answer 1

Cela devrait régler la hauteur IFRAME à la 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 voudrez peut-être ajouter à votre scrolling="no"IFRAME pour désactiver les barres de défilement.

modifier: Oops, a oublié de déclarer the_height.

Answer 2

Cet extrait CSS devrait supprimer la barre de défilement vertical:

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

Je ne suis pas encore sûr d'avoir-il autant d'espace vertical car il a besoin, mais je vais voir si je ne peux pas IT out.

Answer 3

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

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

voir W3C DOCTYPE for examples

J'avais des problèmes avec IE et FF comme il a été le rendu de la iframe document en mode «bizarreries», jusqu'à ce que j'ajoute le DOCTYPE.

Prise en charge de FF/IE/Chrome: le .scrollHeight ne fonctionne pas avec Chrome. J'ai donc créé un exemple javascript utilisant jQuery pour définir toutes les hauteurs IFRAME sur une page basée sur le contenu iframes. NOTE: Ceci est pour 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> 

Answer 4

La solution est de ne pas utiliser et code prétraiter sur côté serveur.

Answer 5

Consultez aussi ce fil: How does the DiggBar dynamically resize its iframe's height based on content not on their domain?.

Il aborde la même question.