div {height:100%;} e IE6

Veréis, llevo ya unos días partiéndome la cabeza con este asunto.

Resumiendo el código, el problema está aquí:

Código :

...
<div id="cont">
...
<div class="m4"></div>
...
</div>
...

Código :

#cont {
  height:auto;
  position:relative;
  overflow:visible;
  ...
}
.m4 {
  heigth:100%;
  position:absolute;
  left:-22px;
  ...
}

La idea es que .m4 tenga la misma altura que #cont.
Eso funciona en FF e IE7. Pero en IE6, .m4 en vez de coger el alto total de #cont coge el valor de la propiedad de #cont, que es auto. Lo deduje porque si cambiaba la altura a valores con píxeles o porcentaje, .m4 sí que cambia de tamaño.

He probado con jquery a darle valor númeric0 a la altura de #cont pero parece que IE6 lo ignora. Aquí un ejemplo funcionando.

Si alguien puede ayudarme le estaré muy agradecido

¿A nadie se le ocurre nada?

Bueno, ¿alguien podría decirme porqué IE6 ignoraba jquery?
El script era este:

Código :

$(".m4").height($("#cont").height());

Código :

var alto = $('#calendar_wrapp').height();
   var alto_total = alto - 15;      
   $('#overlay').css({height: alto_total});

espero y te ayude, es un copy paste de mi codigo

Pues ie6, con su "correcta" interpretacion del modelo de cajas, asume que como el div padre no tiene un alto especificado, el alto debe ser igual al contenido. De esa manera, y como tu creias, el valor se vuelve "auto".

Usando jQuery lo haces facilmente (y de forma entendible):

Código :

<script type="text/javascript">
$(document).ready( function(){
   var alto= $("#cont").height();
   $("#fullheight").height(alto);
});
</script>

Saludos!

Bien, gracias por la ayuda.

He encontrado un problema más. Resulta que los scripts que me habéis dicho eren igual que el que usaba. Lo curioso es que no funcionan bien cuando #cont tiene un width:auto;. Si le pones un valor en porcentaje o píxeles funciona.

¡¡¡Viva IE6!!!