Altura de DIV por defecto y auto

aguila_393 · #1 (**permalink**) 30/06/2008, 17:35

Bueno, mi duda es, como puedo hacer para que una DIV tenga una altura por defecto (por ej. cuando no tenga nada que mida de alto 500px) y que cuando tenga algo que mida mas que eso se agrande sola?

PatomaS · #2 (**permalink**) 30/06/2008, 21:16

Hola

Las alturas de los elementos es un tema muy complejo y poco flexible en las CSS.

En principio, para lograr lo que quieres, no hay una forma automática que funcione bien en todos lados.

Por ejemplo, podrías hacer uso del min-height y max-height, sin embargo, no todos los navegadores lo entienden.

Podrías aignar una dimensión por defecto a los div y en los casos en los que tengas contenido, asignar una clase que lo modifique. Este "añadido", debería hacer se en tiempo de ejecución, es decir, usando JavaScript, por supuesto, puedes usar la misma mecánica, pero a la inversa.

Hay algunas otras opciones, pero son más complicadas.

En principio, no veo una alternativa buena para lo que quieres. Pero si la encuentras, no olvides comentarla aquí.

Felicidad

Mikmoro · #3 (**permalink**) 01/07/2008, 00:54

Bueno, yo creo que es bastante simple:

#caja {
min-height: 500px;
height: auto!important;
height: 500px;
}

Mikel.

PatomaS · #4 (**permalink**) 01/07/2008, 04:47

Hola

Como decía antes, algunos navegadores no entienden el min/max-height/width

Pueden probar este sencillo ejemplo:

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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 http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		* {border: 0; padding: 0; margin: 0;}
		.a {
			height: auto;
			border: 1px solid #f00;
			margin: 1em;
			min-height: 100px;
		}
		.b {
			border: 1px solid #0f0;
			margin: 1em;
			height: 10%;
		}
		.c {
			border: 1px solid #00f;
			margin: 1em;
			height: 10%;
		}
		.d {
			border: 1px solid #ccc;
			margin: 1em;
			min-height: 100px;
		}
	</style>
	<script type="text/javascript">
	</script>
	<title>prueba de dimensiones mínimas</title>
</head>
<body>
	<div class="a">&nbsp;</div>
	<div class="a"><p>texto</p></div>
	<div class="a"><p>texto</p><p>texto</p><p>texto</p><p>texto</p></div>
	<div class="b"><span>&nbsp;</span></div>
	<div class="c"><div>&nbsp;</div></div>
	<div class="d"><span>&nbsp;</span></div>
	<div class="d"><div>&nbsp;</div></div>
</body>
</html>

Lo hice un poco apurado, por lo que si creen que debo mejorar el ejemplo o probar algo más, me avisan. Disculpen las prisas.

Aquí está parte de los elementos que determinan la altura de un elemento de bloque. Como ven depende del contenido para poder calcularlo. Desde el punto de vista del navegador.

Felicidad

Mikmoro · #5 (**permalink**) 01/07/2008, 05:26

¿Has puesto a prueba mi ejemplo?:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.caja {min-height: 500px; height: auto!important; height: 500px;width:600px;border:solid #f00;}
</style>
</head>
<body>
<div class="caja">
TEXTO<br>
TEXTO<br>
TEXTO<br>
TEXTO<br>
</div>
</body>
</html>

Yo creo que funciona en un buen montón de navegadores (modernos, claro).

Mikel.

PatomaS · #6 (**permalink**) 01/07/2008, 10:52

Hola

No, no había probado tu ejemplo, como decía, andaba apuradillo.

Ahora lo probé y funciona. En firefox, opera y konqueror, no me sorprende ya que entienden bien mix/max-height/width. Pero en explorer, que no entiende ni eso, ni el auto, no debería, en teoría, sin embargo, es justamente su fallo en interpretar adecuadamente las propiedades de dimensiones lo que hace que se estire aun sin indicárselo.

De hecho, en explorer funciona como uno esperaría aun sin definir ni una sola propiedad. Al igual que en opera.

En firefox y konqueror, si no se definen las propiedades, pasa lo que debería, es decir, al tener por defecto overflow: visible como propiedad, el contenido se desborda.

Es decir, que explorer, en este caso tien ecomo valor por defecto del overflow auto, al igual que opera, y ambos, hace uso de la libertad de las reglas y deciden que es mejor estirar la caja, mientras que los otros deciden respetar las otras reglas y por lo tanto, copian el estado de scroll si hace falta.

Mucho pensar, debo recordar quedarme con lo simple y no buscar cosas rebuscadas.

;)

Felicidad

Mikmoro · #7 (**permalink**) 01/07/2008, 11:48

Lo imaginaba por tu respuesta. El truco de aprovechar el error de IE con el dimensionamiento es viejo y a veces viene muy bien. Ya que no maneja el "min", aprovechamos el height y el width que en él funcionan como "min", ya que las cajas siempre crecen.
Otra cosa más problemática es el "max".

Mikel.