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

Acciones

Information

9 responses

1 09 2008
Lolleidata

No va

1 09 2008
elmanusito

Lolleidata… puedes pasarme un poco mas de info?… en que navegador… con que sistema operativo… etc…? de todas formas gracias por aportar!

4 11 2008
pepe

Cualquiera!! jajaajaj …. sacar el DOCTYPE!!! jajaja
claro! ¿para que sirve el DOCTYPE no?….. años de desarrollo de un estándar para que alguien escriba esta estupidez…jaajaja

24 02 2009
manolo el bombero

No poner el DOCTYPE atañe que hayan muchas mas problemas, como que el navegador se ponga en “modo Quirks”.

El doctype esta para algo. ¡Siempre hay que ponerlo!

2 05 2009
Anónimo

Hay que poner el DOCTYPE:

para que el height sea efectivamente 100% hay que poner ese atributo en los tags de mayor a menor rango, ejemplo (en el ejemplo es una pagina con lo típico y sólo incluye un div que se llama content dentro del body):

html,body {
height:100%;
}

#main {
margin:0px auto 0px auto;
width:900px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

y listo, con eso basta, ahi mismo esta explicado por qué tiene que ir el min-height. Pondria el codigo completo para los que no saben, pero este editor ordinario no tiene para poner código y se vería feo, aparte de poco entendible.

Saludos

2 05 2009
elmanusito

Muchas gracias por los comentarios gente… es verdad y hago publica mi mea culpa… la verdad que postee algo cuando estaba muy verde para mi el tema… asi que gracias a los comentarios que mandaron y los aportes que han hecho… voy a volver a escribir este post…

Gracias de nuevo a todos!!..ahora visitenme en http://www.manuavalos.com.ar gracias!

2 05 2009
Anónimo

jajajajjaja, borraste el insulto xDDD
por fa, ponle el insulto de nuevo, porque ahi estaba toda el alma de mi post

31 10 2009
Maick

Me das mucha lastima…

por favor no llenes la red de basura…

9 02 2011
ert

Tuviera, con “v” por favor!!!!!!!!!!!
Lo demás está muy bien, ánimo!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: