estudiante
He visto este problema en la web, y todas las soluciones sugeridas no funcionan para mí, así que pensé en venir 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ú fijo y la selección del menú ejecuta una aplicación en el iframe. El contenido del iframe debe desplazarse, pero no la página en su conjunto.
He intentado poner el iframe width=height=100% dentro de un solo elemento de mesa también con width=height=100% pero obtengo dos barras de desplazamiento si hago la ventana demasiado corta verticalmente.
¿Alguna sugerencia?
Creo que no me expliqué bien. Quiero mantener la barra de desplazamiento en el iframe como automática, pero nunca quiero una barra de desplazamiento para toda la página. Necesito que el iframe tenga el tamaño adecuado 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 por la parte inferior del área de visualización.
luca filosofi
ACTUALIZADO:
MANIFESTACIÓN: http://jsbin.com/ewomi3/3/editar
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:
¡Finalmente he entendido lo que quieres! Usar table etiqueta en lugar de una div etiquetar como contenedor! ¡Vea la demostración y disfrútela!
-
Edité mi pregunta, quiero que el iframe se desplace, pero no la página principal del navegador.
– stu
3 mayo 2010 a las 15:19
-
Eres un salvavidas 🙂 (y)
– Aakash Pahuya
23 de enero de 2019 a las 7:21
configure el desbordamiento de css como oculto en cualquier marco del que desee eliminar las barras de desplazamiento …
overflow:hidden
-
No solo quiero que desaparezca la barra de desplazamiento, quiero que desaparezca la necesidad de que desaparezca la barra de desplazamiento, edité mi pregunta para tratar de aclarar el problema.
– stu
3 mayo 2010 a las 15:18
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 usé
<iframe style="height:100%;width:100%" src="https://stackoverflow.com/questions/2758732/..."></iframe>
Después de agregar la eliminación adecuada de relleno/margen/borde, tuve el problema de la barra de desplazamiento doble que describiste. Usando la función de inspección de Chrome, descubrí que el cuerpo de la página era aproximadamente 5 px más largo que el iframe, así que simplemente modifiqué el código del iframe:
<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="https://stackoverflow.com/questions/2758732/..."></iframe>
Eso margin-bottom:-5px; me solucionó el problema.
Para cualquiera que todavía tenga este problema con la barra de desplazamiento doble, 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 el envoltorio.
http://jsfiddle.net/KZ5wz/ (No sé por qué el resultado no se muestra correctamente en JsFiddle pero funciona de maravilla en mi máquina)
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body>
<iframe height="100%" width="100%" src="https://stackoverflow.com/questions/2758732/yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
-
Su respuesta fue marcada por el filtro automático de baja calidad. Por favor agregue más información. ¿Por qué estás sugiriendo este código? Que cambios hiciste.
– idmedia
17 de junio de 2014 a las 13:28
Toby Speight
Los requisitos son claros:
- Hay una barra de menú encima del iframe, por lo que parece que el iframe no puede desplazarse completamente hacia abajo hasta la parte inferior de la página enmarcada.
- La barra de desplazamiento de la ventana debe estar oculta, pero no la barra de desplazamiento del iframe.
Mi solución es muy simple:
- Oculte la barra de desplazamiento de la ventana con
overflow:hidden;. - Asigne a la altura del iframe no el 100% habitual, sino el 100% menos la altura del menú y/o cualquier encabezado que esté sobre el iframe. Asumiré que el menú/encabezado ocupa el 20 % de la altura total, pero dado que normalmente tendrá 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>
-
Su respuesta fue marcada por el filtro automático de baja calidad. Por favor agregue más información. ¿Por qué estás sugiriendo este código? Que cambios hiciste.
– idmedia
17 de junio de 2014 a las 13:28
Kopi Bryant
Es un poco viejo para esta pregunta, pero espero que esto ayude en el futuro.
Para mi caso, iframe dentro de body y mi body tiene el css overflow y se configuró como oculto y sí, causó una barra de desplazamiento doble. Cambialo y soluciono el problema.
body {
overflow-y: hidden;
/* Change to auto */
}
Fuente para css overflow, desbordamiento de css
actualizado una vez más, ¡esto debería funcionar como se esperaba! 😉
–Luca Filosofi
3 mayo 2010 a las 19:24