title: Ways to set div width and height dynamically
body: <p>Scenario 1:
  <br/>Top header with 100% width and 50px height.
  <br/>Left navigation bar with 200px width and dynamic height to fill the screen.</p>
  
  <pre><code>body{
      padding: 0;
      margin: 0;
  }
  
  .header{
      width: 100%;
      height: 50px;
  }
  
  .navBar{
      position: absolute;
      top: 50px;
      bottom: 0;
  }
  </code></pre>
  
  <p>Scenario 2:
  <br/>Top header with 100% width and 50px height.
  <br/>Left navigation bar with 200px width and dynamic height to fill the screen.
  <br/>A container on the right of the nav bar and under the header with dynamic width and height to fill the screen.</p>
  
  <pre><code>.container{
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 200px;
      right: 0;
  }
  </code></pre>
  
  <p>This will work, but I know it is not the best way to implement this. Some suggestions? Many thx!</p>