soy Kseso y esto EsCSS

Del Html y Body y los misterios de su altura en porcentajes

¿Por qué el body no ocupa toda la altura de la ventana pese a declararle height: 100%?

Del Html y Body y los misterios de su altura en porcentajes

·Por Kseso ✎ 11
Del Html y Body y los misterios de su altura en porcentajes

Situación común, causante de muchas canas, arrugas y consultas con cara de no lo entiendo.

Hay un elemento cualquiera hijo directo del body y le encargas vía Css que de alto sea el 100% height: 100% y va y no hace caso.

O lo que es más desconcertante: le dices al 'body' que sea el 100% de alto y le pones un color para visualizarlo y no aparece por ningún lado y sólo va creciendo al ir añadiendo contenido. Como en este gif:

Del body y su pasotismo con height 100%

De la altura en %

De entrada y pese a lo intuitivo o no que resulte este comportamiento has de saber que es el correcto y el que corresponde según la especificación a las alturas declaradas en porcentajes:

La Propiedad height establece la altura de los elementos de bloque.
Si se declara en porcentaje, hace referencia a la altura del elemento en el que se encuentra (a su padre). 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.

Y qué pasa con el Html

Si vuelves al gif anterior notarás que el html pese a no tener declarado valor para la propiedad 'height' aparenta ocupar todo el alto de la ventana del navegador en todo momento, con o sin contenido.

Pero es eso, una apariencia, ya que su altura no es toda la ventana, como anota expresamente la especificación:

Una altura declarada en porcentaje en el elemento raíz es relativa al bloque inicial de contención.

Recuerda que el bloque inicial de contención para cualquier documento es el viewport o espacio (ventana) en el que se muestra.

Así que en ausencia de valor declarado explícitamente para la propiedad 'height' del html es el marcado como valor por defecto: 'auto'. Lo que significa que la altura del Html es la que fuerza su contenido. Y en ausencia de contenido y/u otras propiedades que la modifiquen es 0 (cero) como en cualquier otro elemento de bloque como un div.

Y sí, el fondo ocupa toda la ventana (su altura), pero es que es el único caso y propiedad en el que ocurre una "herencia ascendente". El valor del fondo del html (elemento raíz) es "heredado" por su caja de contención (el viewport). Sin embargo si declaras alguna otra propiedad como bordes, márgenes... al html verás qué ocurre:

See the Pen La cuestión de las alturas en % by Kseso (@Kseso) on CodePen.

La solución para la altura 100%

Hay dos formas para que el body ocupe toda la altura de la ventana pese a que su contenido sea menor.

La clásica de Css2.1

Declarar tanto al html como al body una altura del 100% (si estás seguro que su contenido será siempre menor al viewport o no alteras el overflow) o una altura mínima (min-height) del 100%.

La moderna: unidades relativas al viewport

Una segunda forma es utilizar las unidades relativas al viewport. En el caso que nos ocupa la unidad vh. Ya sea en la propiedad height o min-height según el modelo de caja que uses y cómo gestiones el desbordamiento (overflow) si los contenidos del documento superarán o no la altura del viewport.

Otros artículos sobre la propiedad background

  1. El fondo a fondo. Novedades Css3 en la propiedad background
  2. Relación entre fondos y bordes: background-clip y background-origin
  3. Background-blend-mode: guía para estar a la última en Css
  4. Background-position: secretos, curiosidades y un valor complejo recién documentado
  5. Algunas demos con la propiedad background como protagonista:
    1. Parallax scroll puro Css en todos los contenidos de la página
    2. Troceado de imagen y manejo independiente de cada parte puro Css. Dos sliders
    3. Sustituyendo Gif´s animados por Css y animación de sprites Css
    4. Ventana abierta al fondo del body: recortes en el background
    5. Background 100%. 2 técnicas
    6. Tipografía con texturas y rellenos de imagen
  6. ... Y otros muchos más. Sólo tienes que usar el buscador del blog.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso