html - 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: fixed;
width: 250px;
height: 100%;
left: 0;
}

I don't want to have position: fixed, because I have horizontally scrollable content, so a fixed part would remain, well, fixed.

Is there any way to do such a thing, maybe with relative or absolute position?

Here's an quick Fiddle just for a test and explanation: JSFiddle

Answer 1

You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh CSS unit:

height:100vh;