title: Make inner div to fit both page size and content
body: <p>I have three divs in page called header, content and footer. Header is showing at top and have no issue.</p>
  
  <p>The following css is not working properly with inner div (Content) to fit its content and screen display.</p>
  
  <p>While I want to </p>
  
  <ol>
  <li>expand inner div to fill screen size and footer remain at bottom.</li>
  <li>Keep divs in order</li>
  <li>fill content always</li>
  </ol>
  
  <p>I have tried many css solutions but nothing works perfect to <strong>fit div at page and content both.</strong></p>
  
  <pre><code>.header {
      background-color:  #bf4b4b ;
      /*margin-left: 14%;*/
      top: 0;
      border-width: 0.1em;
      border-color: #999;
      border-style: solid;
      width: 100%;
      height: 80px;
  }
  
  .content {
      background-color: #ffffff;
      margin-left: 25%;
      margin-top: 5px;
      float: left;
      width: 46%;
      border-width: 0.1em;
      border-color: #999;
      border-style: solid;
  
      border-radius: 25px;
      padding: 20px;
  
      flex: 1 1 auto;
  }
  
  .footer {
      background-color:  #243b82 ;
     /* margin-left: 14%;
      float: left;*/
      margin-top: 5px;
      width: 100%;
      height: 80px;
      border-width: 0.1em;
      border-color: #999;
      border-style: solid;
      color:white;
      text-align: center;
  
      /*
      display:inline-block;
      vertical-align:middle;
      */
  display: inline-block;
  vertical-align: bottom;   
  
  
  }
  </code></pre>
  
  <p><strong>Please note its wordpress theme and woocommerce pages need to show inside inner div</strong></p>