Question: I have this css because I have two static navbars with `fixed` position.
But the `#page` takes height of its content and not of screen size, so it doesn't scroll. 

I already tried `height:100vh;`

Any solution to make this `#page` take all the available space in the view so it makes the scroll useful?

```
#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    height: 100%;
    overflow: scroll;
}

```

---

NAVBARS

```
.navbar-right{
    width: 220px;
    left: 0;
    top: 0;
    margin-top:110px;
    position: fixed;
}

.navbar-top{
    border-bottom-color: #fe6803 !important;
    border-bottom: 5px solid;
    position: fixed;
    height: 110px;
    left:   0;
    width: 100%;
}

```

Answer: 
This will make the page fill out the screen, and subtract the margin above:

```
#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    overflow: scroll;
    height: calc(100vh - 110px);
}

```
In order to make something of 100% height, parent of this element needs to also have a defined height. That includes body and html elements if it is the parent.

So if #page is a div inside another div (let's call it divA) inside body. Then html, body, divA and #page needs to be defined with 100% height.

```
html, body {
  height:100%;
}

#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    height: 100%;
    overflow: scroll;
}

```

In [JSFiddle](http://jsfiddle.net/8wnxdfuf/2/)

This differs in behavior from width as width is often pre-defined to 100% width whereas the heights are automatic.