0

为什么 wrapper #4 不继承其父表容器的高度？这些表嵌套在一个显示块包装器中，每个嵌套的 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;
}

更新的答案小提琴：http: //jsfiddle.net/ubjZT/20/

4

1 回答 1

2

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

于 2013-05-31T17:45:03.603 回答