Div 100% de altura funciona en Firefox pero no en IE

Question

Tengo un contenedor div que contiene dos divisores internos; ambos deben tener un ancho del 100% y una altura del 100% dentro del contenedor.

Configuré ambos divisores internos a una altura del 100%. Eso funciona bien en Firefox, sin embargo, en IE, los divs no se extienden hasta el 100% de altura, sino solo la altura del texto dentro de ellos.

La siguiente es una versión simplificada de mi hoja de estilo.

#container 
{ 
    height: auto; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: 100%; 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: 100%; 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
} 

¿Hay algo que estoy haciendo mal? O cualquier peculiaridad de Firefox/IE que me estoy perdiendo?

Answer 1

Creo que "funciona bien en Firefox "está en el modo de Quirks solo representación. En la representación del modo estándar , también podría no funcionar bien en Firefox.

porcentaje depende del "bloque contenedor", en lugar de la ventana gráfica.

CSS Specification says

El porcentaje se calcula con respecto a la altura de bloque que contiene el generado de caja. Si la altura del bloque contenedor no es especificada explícitamente (es decir, depende de en la altura del contenido), y este elemento no está completamente posicionado, el valor se calcula en 'auto'.

por lo

#container { height: auto; } 
#container #mainContentsWrapper { height: n%; } 
#container #sidebarWrapper { height: n%; } 

significa

#container { height: auto; } 
#container #mainContentsWrapper { height: auto; } 
#container #sidebarWrapper { height: auto; } 

que estirarse para 100 height% de la ventana gráfica, es necesario especificar la altura del bloque de contención (en este caso, es #container) . Además, también necesita especificar la altura en cuerpo y html, porque el Bloque de contenido inicial es "dependiente de UA".

Todo lo que necesita es ...

html, body { height:100%; } 
#container { height:100%; } 

Answer 2

Es posible que tenga que poner uno o ambos de:

html { height:100%; } 

o

body { height:100%; } 

EDIT: Vaya, no se dio cuenta de que se hicieron flotar. Solo necesita flotar el contenedor.

Answer 3

Es difícil darle una buena respuesta, sin ver el html que está usando en realidad.

¿Está generando un doctype/utilizando el modo de representación de estándares? Sin realmente poder mirar un repro html, esa sería mi primera suposición para una diferencia de interpretación html entre Firefox e Internet Explorer.

Answer 4

No estoy seguro de qué problema está solucionando, pero cuando tengo dos contenedores uno al lado del otro que deben tener la misma altura, ejecuto un pequeño javascript en la carga de página que encuentra la altura máxima de los dos y explícitamente establece el otro a la misma altura. Me parece que la altura: el 100% podría significar "hacerlo del tamaño necesario para contener completamente el contenido" cuando lo que realmente quieres es "hacer el tamaño del contenido más grande".

Nota: tendrá que cambiar el tamaño de nuevo si algo sucede en la página para cambiar su altura, como un resumen de validación que se hace visible o una apertura de menú plegable.

Answer 5

No creo que IE admita el uso de auto para establecer la altura/ancho, por lo que podría intentar darle un valor numérico (como sugiere Jarett).

Además, parece que no está limpiando sus flotadores correctamente. Trate de añadir esto a tu CSS para #container:

#container { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    /* for IE */ 
    zoom:1; 
} 

Answer 6

que he hecho algo muy similar a lo que tvanfosson 'dicho, es decir, en realidad el uso de JavaScript para vigilar constantemente la altura disponible en la ventana a través de eventos como onresize y use esa información para cambiar el tamaño del contenedor en consecuencia (como píxeles en lugar de porcentaje).

Tenga en cuenta que significa significa una dependencia de JavaScript, y no es tan fácil como una solución de CSS. También deberá asegurarse de que la función de JavaScript sea capaz de correctamente devolviendo las dimensiones de la ventana a todos los principales navegadores.

Háganos saber si una de las soluciones de CSS mencionadas anteriormente funciona, ya que parece una mejor manera de solucionar el problema.

Answer 7

he tenido éxito en conseguir que esto funcione cuando me puse los márgenes del recipiente a 0:

#container 
{ 
    margin: 0 px; 
} 

además de todos sus otros estilos

Answer 8

Prueba esto ..

#container 
{ 
    height: auto; 
    min-height:100%; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: auto; 
    min-height:100% 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: auto; 
    min-height:100% 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
}