Bueno, primero que todo quiero aclarar un punto, este foro no es para que te solucionen los problemas, si para aclarar dudas, solicitar ayuda, tambien compartir y aportar.
Aclarado eso, te dejo una posible solucion.
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>templates</title>
<style>
html, body{
height:100%;
min-height:100%;
margin:0;
padding:0;
color:#FFFFFF;
}
#contenedor{
position: relative;
float:left;
width:600px;
height:100%;
min-height:100%;
background:blue;
}
#arriba{
position:absolute;
left:0;
top:0;
width:100%;
height:50px;
background:red;
z-index: 2;
}
#abajo{
position:relative;
width:100%;
background:black;
height:100%;
z-index: 1;
}
#abajo .contenedor-abajo{
padding-top:50px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="arriba">Arriba</div>
<div id="abajo">
<div class="contenedor-abajo">Abajo</div>
</div>
</div>
</body>
</html>
Saludos.