divs - font color div html

Div 100% height funciona en Firefox pero no en IE

Question

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

Establecí ambos div 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" solo en el modo de renderizado Quirks . En el renderizado en modo estándar , eso también podría no funcionar bien en Firefox.

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

La especificación de CSS dice

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

asi que

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

medio

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

Para estirar hasta el 100% de la altura de la ventana gráfica, debe especificar la altura del bloque contenedor (en este caso, es #container). Además, también debe especificar la altura en cuerpo y html, porque el bloque de contenido inicial es "dependiente de UA".

Todo lo que necesitas es...

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

Answer 2

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

¿Está produciendo un doctype / usando la representación del modo estándar? 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 3

He hecho algo muy similar a lo que dijo ''tvanfosson'', es decir, usar JavaScript para monitorear constantemente la altura disponible en la ventana mediante eventos como onresize, y usar esa información para cambiar el tamaño del contenedor en consecuencia (como píxeles en lugar de porcentaje )

Tenga en cuenta que esto 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 devolver correctamente las dimensiones de la ventana en 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 4

He logrado que esto funcione cuando establecí los márgenes del contenedor en 0:

#container
{
   margin: 0 px;
}

además de todos tus otros estilos

Answer 5

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

Además, no parece que estés limpiando tus flotadores correctamente. Intente agregar esto a su CSS para #container:

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

Answer 6

No estoy seguro de qué problema está resolviendo, pero cuando tengo dos contenedores paralelos que deben tener la misma altura, ejecuto un pequeño javascript en la carga de la página que encuentra la altura máxima de los dos y establece explícitamente el otro para 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 7

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;
}

Answer 8

Puede que tenga que poner uno o ambos de:

html { height:100%; }

o

body { height:100%; }

EDITAR: Vaya, no noté que estaban flotando. Solo necesita flotar el contenedor.