title: Div filling available height
body: <p>I have a problem. As you can see from the code, in div named "div1" I have 3 divs. I want first (yellow) div to be on top, third (yellow) to be on bottom, and the second div (pink) to fill the remaining space. The only fixed heights are the heights of yellow divs. Can you please help me, how to make the pink div fill the remaining space? Here is my code:</p>
  
  <pre><code>&lt;div style="width:100%;background-color: lime;display: table;border-collapse: collapse;"&gt;
  &lt;div style="display: table-row;"&gt;
      &lt;div id=div1 style="display: table-cell;background-color: #0f0;"&gt;
  
          &lt;div style="background-color:yellow;width:100%;height:20px;"&gt;s&lt;/div&gt;
          &lt;div style="background-color:pink; width:100%;"&gt;
              Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
          &lt;/div&gt;
          &lt;div style="background-color:yellow;width:100%;height:20px;"&gt;s&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="background-color: #f00;display: table-cell;width:250px"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>