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

css, html

Solution

tl;dr - add `html, body {height:100%;}` to your CSS.

Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that `#sidebarBack` is a direct child of `body`.

Essentially, your code above is telling `#sidebarBack` to be 100% height of its parent. Its parent (we are assuming) is `body`, so you need to set `height: 100%;` on `body` as well. We can't stop there, however; `body` inherits height from `html`, so we also need to set `height: 100%;` on `html`. We can stop here, because `html` inherits its properties from `viewport`, which already has a declared height of `100%`.

This also means if you end up putting the `#sidebar` inside another `div`, then that `div` also needs `height:100%;`.

Here is an Updated JSFiddle.

Changed your CSS to:

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}

Problem

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

Original source