Solución:
Puede usar el conjunto de marcos como dice la respuesta anterior, pero si insiste en usar iFrames, los 2 ejemplos siguientes deberían funcionar:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
Una alternativa:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
Para ocultar el desplazamiento con 2 alternativas como se muestra arriba:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hackear con el segundo ejemplo:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
Para ocultar las barras de desplazamiento del iFrame, el padre se hace overflow: hidden para ocultar las barras de desplazamiento y el iFrame está hecho para subir hasta el 150% de ancho y alto, lo que obliga a las barras de desplazamiento fuera de la página y, dado que el cuerpo no tiene barras de desplazamiento, no se puede esperar que el iframe exceda los límites de la página. . ¡Esto oculta las barras de desplazamiento del iFrame con el ancho completo!
3 enfoques para crear una pantalla completa iframe:
-
Método 1: longitudes de porcentaje de ventana gráfica
En los navegadores compatibles, puede utilizar longitudes de porcentaje de ventana gráfica como
height: 100vh.Dónde
100vhrepresenta la altura de la ventana gráfica, y del mismo modo100vwrepresenta el ancho.Ejemplo aquí
body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; }<iframe></iframe>
-
Enfoque 2 – Posicionamiento fijo
Este enfoque es bastante sencillo. Simplemente configure el posicionamiento del
fixedelemento y agregue unheight/widthde100%.Ejemplo aquí
iframe { position: fixed; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }<iframe></iframe>
-
Enfoque 3
Para este último método, simplemente configure el
heightde Elbody/html/iframeelementos para100%.Ejemplo aquí
html, body { height: 100%; margin: 0; /* Reset default margin on the body element */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ width: 100%; height: 100%; }<iframe></iframe>
1. Cambie su DOCTYPE a algo menos estricto. No use XHTML; es tonto. Simplemente use el tipo de documento HTML 5 y estará bien:
<!doctype html>
2. Es posible que deba asegurarse (depende del navegador) de que el elemento principal del iframe tenga una altura. Y su padre. Y su padre. Etc:
html, body { height: 100%; }