iFrame no se expande al 100% de altura

Tengo este html a continuación. Y me gustaría que el iFrame cubra el resto de la pantalla con el 100% de lo que quede. Intenté "100%" y "*" en el atributo de altura pero no funcionaba. ¿Porqué es eso? GraciasiFrame no se expande al 100% de altura

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

Fuente

2009-08-12 HP.

El alto de razón: 100% no funciona porque el% de alturas no funciona en niños cuyos padres no tienen una altura explícita (no%). Así que esto no funciona:

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

mientras que esto hace:

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

niño no sabe lo que significa el 60%, así que en vez se convierte en altura: auto (altura determinada por el contenido estático en su interior).

El niño no sabe cómo calcular un% de 60em o cualquier otra unidad explícita.

Existen algunas excepciones a esta regla. Uno de ellos es donde, cuando se dan los elementos html y body altura: 100%, puede usar height: 100% o min-height: 100% en un niño directo. (Podría intentar con la altura: 96% como sugirió Pat pero sabe que esto será valores completamente diferentes por pantalla/altura del navegador. En tamaños inesperados podría perder contenido)

A menos que esté malinterpretando el HTML, parece que tener dos hijos directos: el iframe y # container-frame.

Puede intentar colocar absolutamente # contenedor-marco en la parte superior de la ventana (para que pueda sentarse sobre el resto de la página, y "arriba" quiero decir "más cerca del usuario en el eje z") , y si el iframe no está configurado al 100% de altura, pero tal vez como el ejemplo de Pat, el 96% o algo así, entonces quizás le de al iframe un margen superior para hacer espacio visual para # contenedor-marco. Si no lo hace, la parte superior del iframe quedaría oscurecida por # contenedor-frame y las personas perderían la parte superior. Tenga en cuenta que no puede agregar márgenes superiores o inferiores, relleno, bordes, etc. a una caja de 100% de altura. ¡Eso te daría algo más del 100%!

Otra excepción a la regla% de altura es con elementos posicionados en general en general. También pueden tener un% de altura, excepto que IE6 tiene problemas con esto. De modo que posiblemente el posicionamiento directo de ambos niños directos pueda funcionar, si no te importa hackear IE6 o si no te importa IE6. En general, no me gusta posicionar todo en una página, pero podría ser más fácil en un caso como este.

Fuente

2009-08-12 11:54:03

¿Cómo explica esto por qué un ancho: 100% funciona? – Brabbeldas

@Brabbeldas El ancho y el alto se comportan de forma inherente. Esto no es más que mi primera suposición, pero diría que el navegador tiene la capacidad de determinar el ancho total de la página (ya sea por límite de ventana gráfica o configuración explícita más amplia) pero la altura crecerá según sea necesario y, a menos que se indique explícitamente el navegador no puede saber qué significa 100% –

Este CSS se debe hacer el truco para usted:

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

asentando después la altura del iframe a 96%. Esto evitará que sea empujado desde la parte inferior de la página.

La razón por la que necesita esto es porque el 100% de altura en el iframe se calcula como el 100% de la altura de pantalla disponible. Como tiene un div alto de 35px por encima del iframe, termina con un iframe empujado 35px más allá de la altura total de la pantalla.

Fuente

2009-08-12 03:04:20 Pat

Todavía tengo problemas. El sitio web está aquí si quieres verlo http://web.kucku.vn/u/D –

Sí, esto funcionó para mí. Mi main.html tiene dos marcos, navigate.html y content.html. Utilicé el CSS anterior para diseñar el cuerpo main.html, y funcionó. – msinfo

-1

Usted podría intentar simplemente usando <object> en lugar de

Ejemplo:

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

Tenga en cuenta que la mayoría de la gente va a recomendar contra el uso de cualquier tipo de encuadre (usando objeto o iframe), por motivos de seguridad.

actualización

me olvidó! También puede haber una manera de ajustar el iFrame dinámicamente utilizando una función javascript que se ejecuta después de que el cuerpo se carga. Hay un muy buen ejemplo de ello here.

Fuente

2009-08-12 13:21:39

iFrame no se expande al 100% de altura

Respuesta

Cuestiones relacionadas