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 mak

Answer 1

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%

Answer 2

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

Answer 3

I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.

$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')