Div 100% height scroll

Question

At my page i have a navigation bar to the left that is 100% height and 25% width. It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window. What is the trick to have a div 100% height always, even if the user is scrolling?

Css of the navigation:

    width:25%;     height:100%;     float:left;     color:#999999; 

I have tried position:absolute with no results, also tried clear both. Need help :)

Fiddle

Answer 1

Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

Answer 2

if you want the element to take 100% of the screen use min-height: 100vh and if you want it to take 100% of the parent element use min-height: 100%