height:100%;
Der Ansatz ist schonmal nicht schlecht. Aaaaber.. die %-Angabe bezieht sich immer auf das Eltern Element, das wäre dann <body></body>. Und dessen Elternelement ist <html></html>, dieses ist dein Viewport, also die volle Bildschirmgröße. Und genau das ist das Problem. Dem <body></body> wurde keine Höhe mitgegeben, also Nichts. und 100% von nichts sind.. richtig, garnüscht.
also, gib dem <body></body> mal auch ne 100%, das sollte helfen.
Achte aber drauf, das du kein padding im <html></html> und <body></body> hast, sonst wird das Ganze zu groß, und du hast immer den Scrollbalken.