No me respeta el tamaño de los div

[Pinty]

Hola a todos. Tengo un pequeño problema a la hora de hacer las css de mi pagina web. Queria hacer una prueba antes de hacer el codigo solo para ver como quedarian los componentes. Nunca me habia pasado antes pero, cuando ejecuto la web bacia, es decir sin campos de texto, sin botones etc, no me muestra nada la pantalla. Si pongo por ejemplo en un div que ocupa el 50% de la pantalla, si le pongo una etiqueta <h1> me muestra solo el div adaptado al tamaño del texto.
Por ejemplo el siguiente codigo.

Código CSS:

body {
    width: 100%;
    height: 100%;
    background-color:Aqua;
    color:Black;
}
 
.pagina{
    width:1024px;
    height:768px;
    position:absolute;
    left:50%;
    margin-left:-512px;
    background-color:Black;
}
 
/*Definicion general de la pagina*/
.cabecera{
    position:static;
    width: 100%;
    height: 15%;
    background-color: fuchsia;
}
 
.cuerpo{
    position: static;
    width: 100%;
    height: 77%;
    background-color: maroon;
}
 

Si por ejemplo escribo algo en el cuerpo solo me muestra el cuerpo que ocupa el texto que yo escriba, el resto me lo pone del color del fondo de la pagina.

Espero que alguien me pueda echar una mano. Muchas gracias por adelantado
Un saludo

Noé Montes