CSS zagnieżdżone wysokość div 100% ekranu zamiast nadrzędnej wysokości - html, css, css3

Mam nagłówek div, który jest ustalony na górze strony z zagnieżdżonym div. Pojemnik div ma wysokość 70px, stałą wysokość.

Chcę, aby zagnieżdżony div miał wysokość 100% ekranu, a nie diva kontenera.

To jest mój kod:

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

Moje 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;
}

Jak mogę uzyskać, aby mój zagnieżdżony div był wysokością ekranu, a nie pojemnikiem?

Odpowiedzi:

.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;
}

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

Aby uczynić dziecko div 100% wysokości, będziesznajpierw musimy pozwolić rodzicowi div na 100%. Podział potomny nie może otworzyć granic swojego rodzica i wyświetlać się na pełnym ekranie, chyba że granice rodzica są wystarczająco duże.

Możesz użyć height:100vh zamiast procentu: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/