How can I set a div to full responsive height. (fiddle link included)

I am making a 30/70 design with left the navigation and in the right the content. When I load my page it sets the height to 100%, but when I scroll he does not update its height and the result is that i get to see my background color instead of the divs background color. I went through several similar questions and tried it but then my navigation blow up.

I got a JS FIDDLE http://ift.tt/1Wtj3ju

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
#overzicht {
    height: 100%;
    width: 70%;
    float: right;
    background-color: #f7f7f7;
    z-index: 999;
}

#nav {
    height: auto;
    width: 30%;
    background-color: #2c3e50;
    float: left;
    text-align: center;
}

Here you can see the result when you scroll it doesnt update the height.