How can I make a div 100% of window height?

Question

I just want to have a sidebar that will be 100% of window height, but nothing works except this:

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: f         


        

Answer 1

First, tell the body element to fill the window, rather than shrinking to the size of the content:

body { position: absolute; min-height: 100%; }

by using min-height instead of height, body will be allowed to expand beyond the window's height when the content is longer than the window (i.e. this allows for vertical scrolling when needed).

Now, set your "#sidebar" to be position:absolute, and use top:0; bottom:0; to force it to fill the parent element's vertical space:

#sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

Here are a couple of jsFiddles:

• with content shorter than the window
• with content longer than the window

As you'll see, in both examples, I've preserved your width setting on the "#settings" section, thus showing that horizontal scrolling works as you requested.