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％的高度不能达到500px？

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的全高。

该文字不会填满该区域。