Como hago Div 100%height para explorer (solo cromer comprende)

[phpfan]

-Hola que tal a todos , mira quiero hacer que el div 100% height con su background color me funcione en explorer, pero explorer esta negando esto solo cromer lo entiende y me parece que firefox si lo entiende.


-Que se puede hacer ? la idea es usar el div , no pretendo usar tabla td ni nada por el estilo espero tenga alguno la solucion y eche una mano os agredeciria mucho .

-saludos y gracias.

[kseso?]

Primero deberá fijar un tamaño al html y al body para tener una base de cálculo en el % de su contenedor:

Código CSS:

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  width: 100%;
}
 

Y a continuación a la caja que quiere que ocupe todo el alto definirla y preveer que en caso de que aumenten los contenidos más que la altura de la ventana, siga creciendo:

Código CSS:

#contenedor {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    background: #fe0;
    position: relative;
}
 

Creo que debería ir hasta en ie6. Verifíquelo y comenta.

[KurozakiIchigo]

Código CSS:

#contenedor {
height: auto !important;
min-height: 100%;
height: 100%;
background: #fe0;
position: relative;
}
 

Jaja... #fe0 xD
Se ve buena tu respuesta, pero tengo unas duditas.
-Por que eclaras dos veces el "height".
-Que significa min-height
-Y que signigica el !important

soy novato en esto

[kseso?]

-Por que eclaras dos veces el "height".

Son tres, y en realidad es lograr un alto mínimo del 100% de la ventana del navegador compatible con ie6. Como decía en #2, así si crecen los contenidos, la caja no se corta.

-Que significa min-height

altura mínima. No lo entiende ie, aunque existen equivalencias para esa familia usando código no estándar. Más info.

-Y que significa el !important

Añadido a un valor hacer que prevalezca sobre otras declaraciones realizadas posteriormente. Dicho de otra forma: anula la regla que dice que lo último leído es lo que se aplica. Más info

Y el tercer heigh:100% que es para ie6, que tiene un bug con la propiedad height que hace que la tome como altura mínima y una vez alcanzado ese valor, lo sigue expandiendo si lo necesita.

Por cierto, que gracias a su pregunta, he descubierto que esta solución (el uso de los tres height) fue propuesta ya hace unos años por Dustin Diaz como hack para el min-height en ie6 sin invalidar el código. Y habrá quien posteriormente lo aplicaría al caso que nos ocupa. Y que a mi me llegó de la mano (o mejor dicho, código) de Mikmoro.
Así que gracias porque su curiosidad me ha hecho aprender una cosa más.

P.D.: aprovecho y contesto por acá su mp.
Me complace su comprensión a mi respuesta al primero.

[phpfan]

-Funciona correctamente, la idea de hacer varios height para estos navegadores tan pretenciosos es muy buena gracias , hoy conoci mas clases de height.

-Muchas gracias .

[phpfan]

-Lamento informarle que a por alguna razon a dejado de funcionar esta creando conflictos por causa del include y no parece ser compatible.


-Desgraciademente no funciona como esperaba , es muy extraño esto desis ti dela idea asi lo deje por height.

[kseso?]

phpfan:
No tire la toalla tan fácilmente.
Si el ejemplo sí funcionaba y al añadir algo se estropeó, sólo es cuestión de ver qué lo causa y si tiene arreglo.

¿Puede publicar un enlace a esa página? Sería lo mejor para reproducir el problema.
Si no puede enlazarla, publique los códigos implicados. El html y el css.
Muy importante que sea el html generado, no el programado(php).

[phpfan]

kseso colaborador , Hola de nuevo encontre el problema , este class esta creando conflicto y no permite que funcione la altura que dices , sabria decirme que ocurre?


ul.name li{float:left;text-align:center;width:193px;height:300px;background-image:url(http://www.dominio.com/images/foto.png);margin:5px 5px 0px 0px}

[kseso?]

Como ha abierto un nuevo tema sobre esta misma consulta, replico aquí mi respuesta para asegurarme que es leida:

@phpfan:
Sólo puedo volver a decirle lo mismo que le dije en el otro tema:

Iniciado por kseso?

phpfan:
No tire la toalla tan fácilmente.
Si el ejemplo sí funcionaba y al añadir algo se estropeó, sólo es cuestión de ver qué lo causa y si tiene arreglo.

¿Puede publicar un enlace a esa página? Sería lo mejor para reproducir el problema.
Si no puede enlazarla, publique los códigos implicados. El html y el css.
Muy importante que sea el html generado, no el programado(php).

Seguimos a la espera de que cumplimente la información. Sólo ha publicado un enlace a una imagen que tira un 404 (en ambos temas).

Menciona una lista, pero desconocemos por completo todo su css y html. Y de verdad, créaselo, no somos adivinos. Ponga su realización en línea y facilite un enlace si quiere obtener algo más que suposiciones.

P.D.: es contrario a las normas el duplicar temas o abrir un tema nuevo para la misma consulta ya planteada.