CSS height problem

Question

Hi,

I have this code:

<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>

and in Opera, the div (who has height set to 100%) has a height of 19px. Why does the 100% not make it 500px in height?

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>

You should set the second div height as well.

Answer 2

If you do

<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>

You will see that it is the full height in Opera.

The text just won't fill the area.