title: How to make a div fill remaining space?
body: <p>I have a web page with a header, content and footer.</p>
  
  <p>There is a background image in the content.  I would like the image to fill the remaining space between the header and footer.  There are divs that are children of the content div with the image that will sometimes have content and other times will not.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id='main'&gt;
      &lt;div id='header'&gt;
          &lt;div id='logoCompany'&gt;
              &lt;img class='headerGraphics' src='Graphics\logo smaller.jpg'&gt;&lt;img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='contentParent' class='floatClear'&gt;
          &lt;div id='content' style = "text-align: center;"&gt;
              &lt;div id='leftPane'&gt;
                  Left Col
              &lt;/div&gt;  
              &lt;div id='rightPane'&gt;
                  Right Col
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='footer'&gt;
      Footer      
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0px;
  }
  .floatClear {
      clear: both;
  }
  
  .headerGraphics {
      display: inline;
  }
  
  #header { 
      background: #023489;
      text-align: center;
  }
  
  #logoCompany {
      display: inline;
  }
  #contentParent {    
      height: 373px;
      width: 100%;
      background-image: url(../Graphics/background.jpg);
   } 
  #leftPane { 
      background: yellow;
      float: left;
      margin: 100px 0 0 10%;
      opacity: .5;
      width:40%; 
  }    
  #rightPane { 
      background: green;
      float: right;
      margin: 100px 10% 0 0;
      opacity: .5;
      width:40%; 
  }
  #footer { 
      width:100%; 
  }
  </code></pre>
  
  <p>I tried height: 100% but I suspect this fails without content.  In fact I think that's why everything fails except when I hard code a height.  But that is not a good solution for obvious reasons.</p>
  
  <p><a href="https://jsfiddle.net/6pm6yzeo/" rel="nofollow noreferrer">Here's an example</a></p>
  
  <p>Anyone have any ideas how to make this work?</p>
  
  <p>EDIT:
  I tried changing this:</p>
  
  <pre><code>#contentParent {    
      height: 373px;
      width: 100%;
      background-image: url(../Graphics/background.jpg);
   } 
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>#contentParent {    
      flex: 1;
      background-image: url(../Graphics/background.jpg);
   } 
  </code></pre>
  
  <p>But it shrunk the div to the size of the child div, making things worse..</p>