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


i have div header fixed top of page nested div. div container has height of 70px, fixed height.

i want nested div have height of 100% of screen, not of container div.

this 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 nested div height of screen, not container?

.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/


Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

Nuget pack csproj using nuspec -