Make navigation bar take up entire page height in css

Question

I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the

Answer 1

100% does not apply because it is floated. Change the parent container to position: relative and the navbar to position: absolute will solve the problem.

#container{
    position: relative;
}

#navbar {
    background: #a8a599;
    /*float: left; Instead of float, use absolute position*/
    position: absolute;
    width: 20%;
    height: 100%;
}

Demo