css - 嵌套table in table in table in table in table in div显示 block 不继承高度

Question

为什么 wrapper #4 没有继承其父表容器的高度？表格嵌套在一个显示 block 包装器中，每个嵌套的div是显示表格，每个表格继承到最里面的一个。是什么原因造成的，我该如何解决？

jsfiddle:http://jsfiddle.net/ubjZT/14/ (编辑旧的 jsfiddle 中有一个拼写错误)

html 标记:

<div class="wrapper">
    <div class="lastunit">
       <div class="wrapper2">
          <div class="wrapper3">
             <div class="wrapper4">
              </div>
           </div>
        </div>
    </div>
</div> 

CSS:

.wrapper
{
    display: block;
    background: black;
    height:100%;
    width: 100%;
}
body
{
    height: 500px;
}

.lastunit
{
   height: 100%;
    width: 100%;
   background: yellow;
   display: table;
}

.wrapper2
{
  position: relative;
  padding-top: 58.95117540687161%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  height: 100%;
  display: table;   
  background: red;
}

.wrapper3
{
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 display: table;
 background: green;
 height: 100%;
 width: 100%;
}

.wrapper4
{
  width: 39.24050632911392%;
  margin-left: 5.4249547920434%;
  margin-right: 5.4249547920434%;                                                      
  margin-top: 6.69077757685353%;                                                  
  height: 88.650306748466%;
  display: table; 
  background: purple;
}

更新的答案 FIDDLE:http://jsfiddle.net/ubjZT/20/

Answer 1

此处无需将包装器设置为display: table。只需将它们设置为 display: block(事实上，您可以根本不设置 display 属性，因为 div 默认为 display : block )