CSS вложенная высота div 100% экрана вместо высоты родителя

Question

У меня есть заголовок div, который фиксируется в верхней части страницы с вложенным div. Контейнер div имеет высоту 70 пикселей, фиксированную высоту.

Я хочу, чтобы вложенный 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; 
} 

Как я могу получить вложенное ДИВ быть высота экрана, а не контейнер?

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/

Answer 2

Для того, чтобы сделать дочерний элемент div 100% высотой, вам нужно сначала разрешить родительскому div быть 100%. Детский div не может открыть границы своего родителя и отобразиться на полном экране, если только границы родительских div не будут достаточно большими.

Answer 3

Вы можете использовать height:100vh вместо процентного: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/