CSS nested div height 100% of screen instead of parent height

Question

I have a div header which is fixed to the top of the page with a nested div. The div container has a height of 70px, a fixed height.

I want the nested div to have a height of 100% of the screen, not of the container div.

This is my code:

<div class="header">
    <div class="nested">Content</div>
</div>

My css:

.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow-x: visible;
    overflow-y: auto;
    background-color: #ddd;
}

How can I get my nested div to be the height of the screen, not the container?

Answer 1

.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: relative;
    margin-top: 70px;
    height:100vh;
   background-color: #ddd;
}

Fiddle:https://jsfiddle.net/ek7zfzua/1/