css - Ways to set div width and height dynamically -

scenario 1:
top header 100% width , 50px height.
left navigation bar 200px width , dynamic height fill screen.

body{     padding: 0;     margin: 0; }  .header{     width: 100%;     height: 50px; }  .navbar{     position: absolute;     top: 50px;     bottom: 0; } 

scenario 2:
top header 100% width , 50px height.
left navigation bar 200px width , dynamic height fill screen.
a container on right of nav bar , under header dynamic width , height fill screen.

.container{     position: absolute;     top: 50px;     bottom: 0;     left: 200px;     right: 0; } 

this work, know not best way implement this. suggestions? many thx!

you have add height:100% html , body tag. use calc() css function height , width properties result.

refer snippet both scenarios . working.

html, body{ height:100%;}  header{ width:100%; height:50px;background:#777;}  .nav{ height: calc( 100% - 50px ); width:200px; float:left; background:#888;}  .container{ color:#fff; float:left; width:calc( 100% - 200px ); height:calc( 100% - 50px ); background:#222;}

<header>header</header>    <div class="nav">nav</div>  <div class="container">container</div>