gingerk:
Tal como mencionaban antes... en navegadores como Firefox u Ópera (y cualquier otro que tenga un buen soporte de CSS) cuando a un elemento le das una determinada altura, ésta siempre se va a mantener fija, independiente de la cantidad de contenido que pongas dentro del elemento. Por el contrario, en Internet Explorer esta altura no queda fija, y aumenta a medida que aumenta el contenido. En ese sentido, en IE la propiedad
height se comporta igual que la propiedad
min-height, la cual es compatible con el resto de navegadores.
Desde ese punto de vista tienes 2 opciones:
1. No especificar ninguna altura para el DIV, y dejar que sea su propio contenido el que condicione su tamaño.
2. Si se te hace necesario especificar la altura del DIV, deberías jugar con
height (para IE) y con
min-height (para el resto de navegadores). Para eso tienes varios métodos:
Método 1.
Definir la altura del DIV mediante
min-height. Y para Internet Explorer definir su altura mediante
height y una expresion javascript (así IE sólo entenderá
height y el resto de navegadores solo entenderá
min-height.
Código:
#elDiv{
min-height:100px;
height:expression(100 + 'px');
}
Nota: si quieres darle una altura de 100%, aparte de cambiar
px por
% en el código anterior, también debes definir para los elementos
HTML y
BODY una altura de 100% mediante la propiedad
height (al parecer en este caso ya no se requiere
min-height).
Código:
html, body{
height:100%;
}
#elDiv{
min-height:100%;
height:expression(100 + '%');
}