Hola alguien sabe que puede estar pasando aquí (unidades de medida relativas %):
Definición de width css:
Si los porcentajes se utilizan para establecer la anchura de un elemento, su referencia es la anchura de su elemento contenedor. Si el elemento no se encuentra dentro de ningún otro elemento, su referencia es la anchura de la página entera.
Definición de height css:
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra. Si este elemento contenedor no tiene establecida una altura de forma explícita y el elemento para el que se define la altura no está posicionado de forma absoluta, se ignora la altura en porcentaje y se sustituye por el valor auto.
Ejemplo con height:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
height:900px;
}
#hijo {
background-color:#00CC66;
height:50%;
}
-->
</style>
</head>
<body id="body_padre">
<div id="div_padre">
<div id="otro_div_padre">
<p>gg</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<div id="hijo">
hijoo
</div>
</div>
</div>
</body>
</html>
¿Por qué el div con id hijo NO establece una altura de 50% referente al padre body?
Ejemplo widht:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
width:900px;
}
#hijo {
background-color:#00CC66;
width:50%;
}
-->
</style>
</head>
<body id="body_padre">
<div id="div_padre">
<div id="otro_div_padre">
<p>gg</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<div id="hijo">
hijoo
</div>
</div>
</div>
</body>
</html>
¿Por qué el div con id hijo SI establece una anchura de 50% referente al padre body?
En ninguna de las dos especificación dice que tiene que ser el primer padre, el segundo..etc.
Se supone que tanto width como height, cuando se le asignas porcentajes su referencia es la altura o ancho de su elemento contenedor (padre), y body es un padre del div id hijo, por eso no entiendo porque en height no la establece de body.
ah..si le cambiamos la unidad de medida en div hijo en el ejemplo de height y en vez de ponerle % le ponemos la unidad em, ahora si hace caso y la establece una altura.
Definición de width css:
Si los porcentajes se utilizan para establecer la anchura de un elemento, su referencia es la anchura de su elemento contenedor. Si el elemento no se encuentra dentro de ningún otro elemento, su referencia es la anchura de la página entera.
Definición de height css:
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra. Si este elemento contenedor no tiene establecida una altura de forma explícita y el elemento para el que se define la altura no está posicionado de forma absoluta, se ignora la altura en porcentaje y se sustituye por el valor auto.
Ejemplo con height:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
height:900px;
}
#hijo {
background-color:#00CC66;
height:50%;
}
-->
</style>
</head>
<body id="body_padre">
<div id="div_padre">
<div id="otro_div_padre">
<p>gg</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<div id="hijo">
hijoo
</div>
</div>
</div>
</body>
</html>
¿Por qué el div con id hijo NO establece una altura de 50% referente al padre body?
Ejemplo widht:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
width:900px;
}
#hijo {
background-color:#00CC66;
width:50%;
}
-->
</style>
</head>
<body id="body_padre">
<div id="div_padre">
<div id="otro_div_padre">
<p>gg</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<p>prueb</p>
<div id="hijo">
hijoo
</div>
</div>
</div>
</body>
</html>
¿Por qué el div con id hijo SI establece una anchura de 50% referente al padre body?
En ninguna de las dos especificación dice que tiene que ser el primer padre, el segundo..etc.
Se supone que tanto width como height, cuando se le asignas porcentajes su referencia es la altura o ancho de su elemento contenedor (padre), y body es un padre del div id hijo, por eso no entiendo porque en height no la establece de body.
ah..si le cambiamos la unidad de medida en div hijo en el ejemplo de height y en vez de ponerle % le ponemos la unidad em, ahora si hace caso y la establece una altura.