CSS max-height no funciona

Tengo un problema muy simple en el que necesito expandir un div para que se ajuste a su contenido a menos que la altura alcance cierto tamaño, cuando quiero que el div se desplace verticalmente. Como prueba, creé una página que contiene:CSS max-height no funciona

<div style="width:300px;max-height:25px;background-color:green;overflow:auto;"> 
    1<br /> 
    2<br /> 
    3<br /> 
    4<br /> 
    5 
</div>

Desafortunadamente, la altura máxima no parece funcionar. ¿Qué estoy haciendo mal?

Estoy usando IE7.

Fuente

2009-02-06 Baffled by ASP.NET

El problema es su navegador. Tal vez podrías envolver este div en otro div que tenga la altura fija de 25px. Por supuesto, esto no sería exactamente lo mismo que la altura máxima.

An article about a solution.

Editar:According to Microsoft debería funcionar en IE7 +.

¿Ha establecido un doctype apropiado? Si no, IE7 usa un viejo motor de diseño. Debe usar HTML 4 o XHTML.

Fuente

2009-02-06 15:34:02

Aquí es la forma multi-navegador para establecer min-height:

min-height: 400px; 
height:auto !important; 
height:400px;

IE trata el atributo de altura como mínimo la altura, e ignora min-height.

Editar: ¡Error al leer la pregunta como altura mínima! (> _ <)

Fuente

2009-02-06 15:30:25 tj111

¿Esto solucionará el problema de la altura máxima? –

Por lo que sé. Creo que necesitas usar expresiones CSS (ugh) o javascript para arreglar la altura máxima. Esto solo funciona porque IE trata la altura como min-height, y usará la última regla para aparecer, por lo que ignora el 'auto'. Si lo haces funcionar, me encantaría saber :). – tj111

'height: auto;' trabajado para mí junto con 'min-height' – Sterex

Tu código funciona para mí.

¡Cuando lo envuelvo con una página!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>1 2 3 4 5</title> 
</head> 

<body> 
<div style="width:300px;max-height:25px;background-color:green;overflow:auto;"> 
    1<br /> 
    2<br /> 
    3<br /> 
    4<br /> 
    5 
</div> 
</body> 

</html>

Funciona en IE7 y Chrome fine.

FF3 no me está dando barras de desplazamiento.

Pero la altura máxima funciona bien en los tres.

Sin la página circundante, aunque su fragmento de código no funciona. Sugiero probar el código en una página válida de HTML. * sonríe *

Fuente

2009-02-06 15:37:47

Eso se debe al tipo de documento que tiene. Desafortunadamente no puedo usar ese tipo de documento porque interfiere con el conjunto de control que usamos. –

Qué doctype necesitas usar, voy a jugar con eso. –

Resuelto el problema de FireFox, la altura máxima es demasiado pequeña para el desplazamiento cromado, haciendo que desaparezca. –

Respuesta

Cuestiones relacionadas