html - schools - iframe scrolling vertical
¿Cómo deshacerse de la barra de desplazamiento doble al utilizar un iframe? (11)
Bueno, la pregunta es antigua, pero hoy tuve el mismo problema, y ninguna de las respuestas resolvió mi problema. Solo con páginas internas (el mismo dominio), también aparecieron dos barras de desplazamiento verticales. Una para navegar por la página cargada (correcta), y otra para ajustar un poco la altura de la zona del marco (!) ... Con las páginas de origen externas parece funcionar bien.
La forma en que solucioné este problema era agregar una clase al cuerpo de la página interna para cargar, como esto
<body class="internalPage">
y poner lo siguiente en mi archivo CSS
body.internalPage{height: 99.5%;}
Espero que ayude a alguien en el futuro.
He visto este problema en la web y todas las soluciones sugeridas no me funcionan, así que pensé que vendría aquí.
Tengo una página que tiene un iframe. La parte superior de la página es un menú desplegable, el resto de la página es el iframe. La idea, como estoy seguro de que todos los demás lo hacen, es tener el menú inmóvil y la selección del menú ejecuta una aplicación en el iframe. El contenido del iframe debería desplazarse, pero la página en su conjunto no debería.
He intentado colocar el width=height=100% iframe width=height=100% dentro de un solo elemento de la tabla también con width=height=100% pero obtengo dos barras de desplazamiento si la ventana es demasiado corta verticalmente.
¿Alguna sugerencia?
Creo que no me expliqué bien. Quiero mantener la barra de desplazamiento en el iframe como automático, pero nunca quiero una barra de desplazamiento para toda la página. Necesito que el iframe se dimensione adecuadamente para que siempre ocupe exactamente el resto de la página para que el navegador no tenga que hacer una barra de desplazamiento porque el iframe nunca debe extenderse desde la parte inferior del área de visualización.
Eliminar cuerpo {altura: 100%; }
Los requisitos son claros:
- Hay una barra de menú encima del iframe, debido a la cual el iframe no parece poder desplazarse completamente hacia la parte inferior de la página enmarcada.
- La barra de desplazamiento de la ventana debe estar oculta pero no la barra de desplazamiento de iframe.
Mi solución es muy simple:
- Ocultar la barra de desplazamiento de la ventana con
overflow:hidden;. - Indique que la altura del iframe no sea el 100% habitual, sino el 100% menos que la altura del menú y / o el encabezado que se encuentre sobre el iframe. Asumiré que el menú / encabezado ocupa el 20% de la altura total, pero dado que generalmente será de una altura fija, tal vez se pueda calcular mejor en CSS3 como
height: calc ( 100% - 120px );. El envoltorio alrededor del iframe puede ser un div o una tabla con un ancho del 100% y una altura del 100%.
Aquí está mi ejemplo con la altura del iframe establecida en 80% (de la ventana):
estilo:
body {
overflow: hidden;
}
#hold_my_iframe {
padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}
html:
<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
<iframe src="http:/example.com/my-iframed-page.php"
width="100%" height="80%"
marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
Para cualquier persona que aún tenga este problema con la doble barra de desplazamiento, todo lo que tiene que hacer es envolver el iframe con un elemento con desbordamiento: oculto, luego agregar una altura del 100% al html, el cuerpo, el iframe y la envoltura.
http://jsfiddle.net/KZ5wz/ (no sé por qué el resultado no se muestra correctamente en JsFiddle pero funciona como un encanto en mi máquina)
Resolví mi problema con la doble barra de desplazamiento asignando dinámicamente la altura de iframe.
Sé que esto era un poco viejo, pero esto es lo que hice para mi página:
Tenía una página con solo un iFrame, y quería que ocupara toda la página, así que utilicé
<iframe style="height:100%;width:100%" src="..."></iframe>
Después de agregar la eliminación adecuada de relleno / margen / borde, tuve el problema de la doble barra de desplazamiento que describiste. Usando la función de inspección de Chrome, descubrí que el cuerpo de la página era aproximadamente 5px más largo que el iframe, así que solo modifiqué el código del iframe:
<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>
Ese margin-bottom:-5px; arreglado el problema para mí
Si todo el contenido de la página es un iFrame, todo lo que necesita es agregar el estilo:
<style>
body {
overflow: hidden;
}
</style>
De lo contrario, podría colocarlo en una tabla o bucear y solo apuntar a ese elemento. Hay una respuesta arriba que tiene la solución para una tabla.
Viendo que esta pregunta sigue sin respuesta de alguna manera, pensé que iba a tirar mis diez centavos. Me preguntaba si ha jugado con la display:block / display:inline configuración en display:inline . No entiendo completamente su pregunta, no estoy exactamente seguro de cómo haría esto, pero creo que es posible que desee cambiar su iframe para mostrar en inline .
establece el desbordamiento de css como oculto en el marco del que quieras eliminar las barras de desplazamiento ...
overflow:hidden
ACTUALIZADO:
DEMO: http://jsbin.com/ewomi3/3/edit
HTML
<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
<iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>
CSS
* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }
NOTA: ¡Por fin he entendido lo que quieres! Use la etiqueta de table lugar de una etiqueta div como contenedor! ¡Vea la demo y disfrútela!
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body>
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>