el porcentaje es un valor que funciona dependiendo al valor de su padre y miro que a la className con id=outer tiene un heigth=100% eso funcionaria si le pones una altura al body pero si el body no tiene altura tiene un valor por default como heigth=auto eso significa que aumenta por su contenido y eso significa que no tiene un valor de altura obligatorio lo que tendrás que hacer es darle un valor obligatorio al padre del hijo que quieres darle una altura en porcentaje si el es heigth=1900px el hijo con un heigth=100% ocupára el 100% de 1900px. con esta logica si en ves de poner porcentajes a los hijos en tu codigo ponle valores obligatorios en ves de 100% => 100px o 1000px lo que quieras. esto significa que si pones los valores en pixeles harás que el body al estar con una altura por default se obligue a estar del grande de su hijo que el cual tiene una latura obligatoria. te recomienda poner border:2px solid black; para mirar como estan maquetados tus div,body,nav,headre,footer etc