表格中的表格中的嵌套表格不在繼承高度的div顯示塊中

爲什麼包裝＃4不繼承其父表格容器的高度？這些表嵌套在顯示塊封裝中，每個嵌套div都是顯示錶，每個表都繼承到最內層。這是什麼原因造成的，我該如何解決它？表格中的表格中的嵌套表格不在繼承高度的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/

來源

2013-05-31 Masu

我只看到你的小提琴紅色方塊......也，與那些瘋狂％的在什麼'.wrapper4'的樣式規則？你的意思是設定「身高：100％」？ – crush

它應該是部分綠色和部分紅色。我更新了小提琴，我無意中在綠色之後放了一個綠色報價。這些百分比來自我用來設置圖像大小的真實網站。爲什麼沒有紫色？ – Masu

好，修好你的錯字之後，我看到一個薄綠色的盒子，然後是一個巨大的紅色盒子。 – crush

這裏不需要將包裝設置爲display: table。只需將它們設置爲display: block（你可以，事實上，沒有設置display屬性，因爲在所有div默認爲display: block）

來源

2013-05-31 17:45:03 crush

表格中的表格中的嵌套表格不在繼承高度的div顯示塊中

回答

相關問題