CODEWITHSUNDEEP
css
Tower
Tower

Reputation: 102945

CSS height problem

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?

Upvotes: 1

Views: 144

Answers (2)

Metalshark
Metalshark

Reputation: 8482

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.

Upvotes: 0

Tarik
Tarik

Reputation: 81801

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

Upvotes: 1

Related Questions