Проблема высоты CSS

Question

У меня есть этот код:

<div style="height: 500px; background: #f00; display: table;">
  <div style="display: table-cell;">
    <div style="display: table; height: 100%;">
      <div style="display: table-cell;">asd</div>
    </div>
  </div>
</div>

и в Opera div (высота которого установлена ​​на 100%) имеет высоту 19px. Почему 100% не достигают высоты 500 пикселей?

Answer 1

<div style="height: 500px; background: #f00; display: table;">
  <div style="display: table-cell;height:100%">
    <div style="display: table; height: 100%;">
      <div style="display: table-cell;">asd</div>
    </div>
  </div>
</div>

Вы также должны установить высоту второго div.

Answer 2

Если вы делаете

<div style="height: 500px; background: #f00; display: table;">
   <div style="display: table-cell;">
     <div style="display: table; height: 100%; background: #00f;">
       <div style="display: table-cell;">asd</div>
     </div>
   </div>
 </div>

Вы увидите, что это полная высота в Opera.

Текст просто не заполнит область.