CSS: height:100%

25 06 2008

Mil veces queremos hacer que nuestros div´s se escalen al 100%… algunos colocan tablas dentro de los divs…(absurdo)… otros se resignan y vuelven a las tablas… pero hoy vamos a sacar el manto de misterio a este problema…

Lo primero es el DOCTYPE… al contener doctype, estamos especificando que tipo de documento estamos utilizando… y por lo tanto… le estamos indicando al navegador como tratar todos nuestros elementos html…

Si no especificamos este parametro y solo colocamos el tag <html> solo… 50% de nuestro problema ya esta resuelto…

Esto funciona colocando un div de la siguiente manera:

<html>
<head>
<title>prueba</title>
</head>
<body>
<div style="height:100%;">
hola mundo! al 100% de alto!
</div>
</body>
</html>

Ahora… si tubieramos a nuestro div dentro de otro div… y este ultimo no tubiera el atributo height:100%;... nunca funcionaria... entonces... tanto el div contenedor ... (div padre) como el div contenido (div hijo) deben tener especificados!.

ejemplo: INCORRECTO


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba</title>
</head>
<body>
<div id="contenedor">
<div id="hijo" style="height:100%;">
hola mundo! al 100% de alto!
</div>
</div>
</body>
</html>

ejemplo: CORRECTO!


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba</title>
</head>
<body>
<div id="contenedor" style="height:100%;">
<div id="hijo" style="height:100%;">
hola mundo! al 100% de alto!
</div>
</div>
</body>
</html>

Espero que les sea tan util como ami… pruebenlo y luego me dicen!…

Anuncios