title: CSS div fill entire parent without position:absolute
body: <p>I have some divs that are laid out in a tabular manner using table CSS. Each of the cells has a child. I need this child to fill the height of the parent.</p>
  <p>I cannot use position:absolute because it will ruin the layout of the rest of the site. Example HTML is:</p>
  <pre><code>&lt;div id=&quot;parent&quot;&gt;
      &lt;div class=&quot;item&quot;&gt;
          &lt;div class=&quot;data&quot;&gt;
              sasfadasd
              aasdfa
              asdfasdf
              asdf
          &lt;/div&gt;
     &lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;
          &lt;div class=&quot;data&quot;&gt;
              sasfadasd
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;
          &lt;div class=&quot;data&quot;&gt;
              sasfadasd
              aasdfa
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>using the following CSS</p>
  <pre><code>#parent{
      display:table;
      width:200px;
  }
  .item{
      display:table-cell;
      padding:5px;
  }
  .data{
      background-color:grey;
  }
  </code></pre>
  <p>jsFiddle link: <a href="http://jsfiddle.net/dPw7W/" rel="nofollow noreferrer">http://jsfiddle.net/dPw7W/</a></p>
  <p>I want all the grey boxes to be the same size. coloring the parents grey is cheating</p>
  <p><strong>Edit</strong><br> Parent height is not able to be set. It is dynamically populated by the child elements. the data div <strong>only</strong> exists so that i can space the divs. If i use the border-spacing, it won't let me dynamically set spacing. If someone can suggest how to space the cells without border spacing, that would solve the problem.</p>