¿Cómo quitar el Scrollbar Horizontal en un IFRAME o FRAME?

Patrick D'appollonio 21 de abril del 2007 ¡Coméntala!

Quitando la Barra de desplazamiento horizontal de un IFRAME Todos los webmasters hemos tenido ese problema. Particularmente en la empresa hemos tenido uno que otro dolor de cabeza cuando creamos una web y luego la ponemos en un FRAME o IFRAME. Nos sucedió con la versión número 2 del Sitio de Connect@. El truco para quitar el Scrollbar Horizontal es simple, pero que quizás sea poco ético…

Todas las webs, o la gran mayoría poseen un código al Inicio del texto HTML como éste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Este código automáticamente agrega la Barra Horizontal de Desplazamiento a los IFRAMES o FRAMES cuando la tengan encima, el truco está en quitarla de ahí y ya. Nunca tendrán una barra horizontal molestándoles. Pero cuidado: Si usas alguna plantilla de Dreamweaver, el quitar ese código podría entorpecer el funcionamiento de la plantilla, desarmándola literalmente.

Pueden ver un ejemplo de cómo quedaría el código fuente y en Vivo en la Dirección de abajo…

Ejemplo | Ejemplo de Supresión de la Barra Horizontal en un IFRAME

Arezodiu

Excelente! Gracias por publicarlo, no sabía como se quitaba la estúpida barra horizontal. Habia probado algunos códigos css y nada…

Te felicito por el Blog
marckony

tengo una gran duda espero que alguien me pueda ayudar llevo varios dias buscando en internet y nada, el problema es que tengo un iframe principal donde mando mostrar varias paginas distintas y el problema radica en que todas son de ditinto tamaño de alto algunas mas grandes en altura que el propio iframe entonces en algunas al cargarlas no muestra toda la informacion q tiene esa pagina debido a que la corta y no quiero utilizar el scroling automatico ya que pierde belleza o estilo (segun mi jefe), alguna funcion o truco para que el iframe se redimensione de acuerdo a lo alto de cada pagina que se carga???? espero habeis explicado bien mi problema gracias.
http://www.marlexsystems.org Marlex

Marckony, creo que no comprendí muy bien… ¿Podrías poner un ejemplo online para verlo y poder ayudarte?
http://www.subsoul.co.nr xDeadxLovex

mi problema es que cuando quito ese codigo.. aparece otra ves cuando guardo la pagina?
que hago!!
http://www.marlexsystems.org Marlex

xDeadxLovex, si estás Usando un Editor WYSIWYG deberás ir borrando el código cada vez que guardes… Lástima…
http://www.subsoul.co.nr xDeadxLovex

aam.. no se que sera ese tal editor.. soy principiante xD
utilizo nvu
?
http://www.marlexsystems.org Marlex

Pues eso, el NVU es un Editor WYSIWYG, por lo que cada vez que crees un archivo con el te agregará automáticamente la línea de Código que mencioné arriba…
http://www.subsoul.co.nr xDeadxLovex

ok.. perdona la ignorancia..
gracias!
Ricardo el principiante

Gracias, me salvaron de 8 horas de romperme el craneo contra el escritorio… esto si que es sentirse realizado…
Diego

Gracias gracias gracias!
Llevaba 2 horas pegándome con ese maléfico scroll. Estoy desarrollando un portal ASP .NET, y efectivamente se generaba la mencionada línea doctype.
Lo curioso es que hace 24 horas, realizando pruebas con una maqueta en local, también tuve un encontronazo con esa línea. Para quien le pueda servir, también impide que se ejecute el comando javascript window.open para abrir un archivo local (un pdf por ejemplo).
Un saludo.
GreyShock

Es mucho más sencillo añadir una sencilla línea al estilo de nuestro body:

body {overflow-x:hidden;}

añadiendo esto a la pagina que aparecerá en nuestro iframe desaparece el scroll horizontal.

Podemos hacer lo mismo para el vertical con “overflow-y:hidden;”
Simon

gracias greyshock.. eso esra todo lo que queria
More

Excelente, yo lo probe. Gracias por ese aporte
Arkimedes

J O D E R… ha sido casi como un orgasmo… cuantas horas de mal de cabeza solucionadas en un minuto.

Muchas gracias, se os debe una bien gorda!!
Cristian

Muchas gracias ¡¡¡¡

efectivamente, borre esa linea y funciono de inmediato ¡¡¡¡

Saludos.
Alex S

definitivamente deben quitar los scrolls con CSS!!! como menciona el usuario GreyShock. de ninguna manera quiten la linea del DOCTYPE!!! acaso no se les ha ocurrido que esta ahi por alguna razon?

si solo estan haciendo una pagina sencilla de tarea escolar pues, no importara mucho pero en cuanto a desarrollar algo mas profesional, organizado o simplemente de calidad, esa linea es INDISPENSABLE para definir la manera en la que se interpretará el resto del documento

para quitar scrollos estan los estilos!!!!! no tapen un hoyo creando otro.. despues podrán tener problemas de compatibilidad de estandares o navegadores por no especificar correctamente el doctype… CUIDADO!!!
http://www.marlexsystems.org Marlex

@Alex S: Si es un iframe y no le darás un uso muy extendido, esta solución viene de maravillas.

Ahora, obviamente, si el iframe será algo más grande, entonces es mejor usar otras soluciones, pero a veces el CSS no puede quitar las scrollbars.
Juan

Esto body {overflow-x:hidden;} me funciono de maravillas para quitar las barras!!! muchas gracias por compartir!!! saludos!
bauer

Curioso, a mi no me funciona el {overflow-x:hidden;} en explorer y eso que la página que se carga en el iframe es bastante mas pequeña que el iframe…
bauer

Acabo de hallar una solución alternativa para los que no les funcione el {overflow-x:hidden;} en Explorer :

1 – en la llamada del iframe, agregar scrolling=”yes”
2 – en la página que se abre dentro del iframe, agregar leftmargin=’0′ rightmargin=’0′

yub – yub, ewoks, yub yub !!
it works !!
bauer

Bueno, se comprende que el leftmargin=’0′ y el rightmargin=’0′ deben ir donde se define el body ¬¬
maikel

…la solución del doctype es como si te duele un brazo y para eliminar el dolor te lo amputas…(ya no hay dolor claro)…pero eso no cumple los estandares w3c (que a mi me exigen por ejemplo)….
reyneta

Hola ami me resulto de la siguiente manera:

esto en el html:

html{overflow-x:hidden;}

y en el css puse:

body {
overflow-x:hidden;
}
solucion para mozilla y ie

¿Cómo quitar el Scrollbar Horizontal en un IFRAME o FRAME?

Notas Relacionadas: