html - CSS 嵌套 div 高度 100% 屏幕而不是父高度

Question

我有一个 div header ，它固定在带有嵌套 div 的页面顶部。 div 容器的高度为 70px，固定高度。

我希望嵌套的 div 的高度为屏幕的 100%，而不是容器 div 的高度。

这是我的代码:

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

我的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;
}

如何让嵌套的 div 成为屏幕的高度，而不是容器的高度？

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/