Foros del Web » Creando para Internet » CSS »

Altura de DIV por defecto y auto

Estas en el tema de Altura de DIV por defecto y auto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/06/2008, 17:35
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 16 años, 5 meses
Puntos: 1
Altura de DIV por defecto y auto

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?
  #2 (permalink)  
Antiguo 30/06/2008, 21:16
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Respuesta: Altura de DIV por defecto y auto

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 01/07/2008, 00:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Altura de DIV por defecto y auto

Bueno, yo creo que es bastante simple:

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

Mikel.
  #4 (permalink)  
Antiguo 01/07/2008, 04:47
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Respuesta: Altura de DIV por defecto y auto

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
__________________
¡ hey, hou, hou, hey !

Última edición por PatomaS; 01/07/2008 a las 05:02 Razón: agregar referencia
  #5 (permalink)  
Antiguo 01/07/2008, 05:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Altura de DIV por defecto y auto

¿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.
  #6 (permalink)  
Antiguo 01/07/2008, 10:52
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Respuesta: Altura de DIV por defecto y auto

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
__________________
¡ hey, hou, hou, hey !
  #7 (permalink)  
Antiguo 01/07/2008, 11:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Altura de DIV por defecto y auto

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:50.