Hacer un iframe tomar espacio vertical

Question

Me gustaría tener una iframe tomar tanto vertical como el espacio que necesita para mostrar su contenido y no mostrar una barra de desplazamiento.¿Es posible ?

¿Hay soluciones?

Answer 1

Esto debe establecer el IFRAME altura a su contenido de la altura:

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

Puede que desee agregar scrolling="no" a su IFRAME para desactivar las barras de desplazamiento.

editar: Oops, se olvidó de declarar the_height.

Answer 2

La solución es no usar <iframe> y preprocesar código en el lado del servidor.

Answer 3

También echa un vistazo a este hilo: ¿Cómo funciona el DiggBar cambiar el tamaño de su iframe de la altura de la base en el contenido no en su dominio?.

En ella se aborda la misma cuestión.

Answer 4

Este fragmento de CSS debe quitar la barra de desplazamiento vertical:

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

Todavía no estoy seguro acerca de tener que ocupar tanto espacio vertical como sea necesario, pero voy a ver si puedo averiguar.

Answer 5

La adición de un DOCTYPE declaración de la IFRAME fuente documento le ayudará a calcular el valor correcto de la línea

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

ver W3C DOCTYPE para los ejemplos

Yo estaba teniendo problemas con IE y FF como fue la representación de la iframe documento en 'peculiaridades' modo, hasta que he añadido el DOCTYPE.

FF/IE/Chrome apoyo:El .scrollHeight no funciona con Chrome, así que he venido para arriba con un ejemplo de javascript usando jQuery para establecer todos IFRAME a las alturas en una página basada en la iframes contenido.NOTA:Esto es para las páginas de referencia dentro de su dominio actual.

<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>