Veréis, pasa lo siguiente, tengo el bonito deseo de poderle poner a un <div> un height de un 10%, el problema es el siguiente.
Yo no se por que, pero por alguna razón, el valor del height del body y del html se ajustan a los elementos que hay en la pagina web, razón por la cual no puedo establecerle el 10% a mi <div>.
Así que por investigar un poco me decidí a hacer pruebas, y cree un página web HTML en blanco. Miré cuánto ocupaba el <body> y el <html>, y ocupaban todo el alto y el ancho de la pantalla.
Explicadme la razón por que de verdad que no se la encuentro.
Para detallar un poco mas, cogí la pagina web la que no podía establecerle el <div> un ancho del 10%, y mediante las herramientas administrativas de Chrome, fui eliminando etiquetas hasta dejar solo el <html>, y el <body>, pero así y todo no conseguí resultados.
Respuestas
Aunque este error es frustrante, la causa del mismo es muy sencilla. Se explica en la propiedad height de la Referencia CSS que hemos publicado en este mismo sitio:
Cuando un elemento establece su altura mediante un porcentaje, la referencia que se toma es la altura de su elemento contenedor. Sin embargo, si ese elemento contenedor no tiene establecida una altura de forma explícita, se ignora la altura en porcentaje y se sustituye por el valor auto.
Así que tienes que establecer explícitamente la altura del elemento padre del <div>.
@javiereguiluz
Si pero eso ya lo sabía, lo que no se es como en un documento html vacío el body y el html por alguna razón ya ocupan el ancho y el alto total de la ventana.
@raultrysw
No hay una explicación concreta a por qué el <html> y el <body> ocupan toda la anchura y la altura. Ni siquiera en la explicación del elemento body en el estándar HTML5 se indica que debe ocupar toda la altura y anchura. Así que se trata de una convención que siguen todos los navegadores.
Por otra parte, los elementos <html> y <body> son tan "especiales", que mi recomendación sería que no los utilizaras directamente aplicándoles estilos CSS. Mejor crear elementos como el típico <div class="container"> para agrupar a todos los contenidos de la página.
@javiereguiluz
muchas gracias por la rápida atención =)
@raultrysw
Ya averigué lo que pasaba (aleluya)
El problema de todo era la directiva <!DOCTYPE HTML> (en la primera línea).
Por alguna razón la cual la desconozco es que html5 asigna todo el alto y todo el ancho al body y al html y html 4.01 no, menos mal que lo averigué xd, me estaba volviendo loco.
@raultrysw