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!…
Comentarios recientes