title: Height of div with property display:table same as parent div
body: <p>I am trying to make div with class name "data" same height as parent div ("strip1"), but unfortunately it is little shorter. It happens only on Chrome, but not on Firefox. What should I fix?</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="strip1"&gt;
      &lt;div class="data"&gt;
          &lt;div class="data_element dataA"&gt;A&lt;/div&gt;
          &lt;div class="data_element dataB"&gt;B&lt;/div&gt;
          &lt;div class="data_element dataC"&gt;C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="strip2"&gt;&lt;/div&gt;
  &lt;div class="strip3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>body{
     padding:0;
  }
  
  .strip2 {
      background-color: #FFFFFF;
      height: 65%;
      position: absolute;
      top: 25%;
      left: 0;
      width: 100%;
      text-align: center;
  }
  .strip3 {
      background-color: green;
      height: 10%;
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
  
   }
  
  .strip1 {
      background-color: red;
      height: 25%;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
  
  }
  .data {
      background-color: #00337C;
      display: table;
      height: 100%;
      width: 100%;
  
  }
  .data_element {
      color: #FFFFFF;
      font-size: 30px; 
      width: 100%;
      height: 100%;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 30px;
  }
  
  .data_element.dataA {    
      width: 20%;    
  }
  .data_element.dataB {
      width: 50%;
  }
  .data_element.dataC {
      font-size: 20px;
  }
  </code></pre>
  
  <p>Here is example <a href="http://jsfiddle.net/ZQQY4/1455/" rel="nofollow">live jsFiddle example</a></p>