Problemas con el height: 100%;

[Mikmoro]

Tiene varias cosas interesantes: empezamos con un contenedor centrado y con posición relativa, para que la absoluta del bloque rojo se coloque con respecto a él. Luego el azul ya no necesita anchura, porque la anchura la marca el contenedor, y el azul ocupa el 100%. El rojo va antes en el flujo porque así se coloca detrás sin hacer nada, aunque podríamos ponerlo después si eso te perjudica para algo y colocarlo detrás con z-index, en previsión de lo cual el bloque azul también tiene posicion relativa, que si no no aceptará el z-index.

En fin, como te decía se podría hacer de varias maneras, y todo está en función de la composición final de los elementos.

Me alegro de que te sirva.

Saludos.