為什么高度不能100％將div完全擴展到頁面底部？

Question

我希望#f8f8f8擴展到頁面底部。 我嘗試增加height: 100%; 到.tab-content但沒有任何反應。

有什么建議么？

 html, body { width: 100%; height: 100%; margin: 0; } .tab-container { color: #fff; background: #000; } .tab-content { background: #f8f8f8; height: 100%; /* doesn't work */ } 

 <div class="vreditor-sdk"> <div class="building"> <div class="header"></div> <div class="i-tab"> <div class="tab-container"> </div> <div class="tab-content"> Test </div> </div> </div> </div> 

Answer 1

將背景色屬性放在i-tab類中

.i-tab { 
background-color: #f8f8f8;
}

並將其從tab-content類中刪除。

Answer 2

在css中，當您將高度指定為百分比時，它將采用該父高度的百分比。

給予height: 100%; 到.tab-content意味着它需要100%高度的.itab而不是頁面。 因此，如果您希望您的.tab-content覆蓋整個頁面，則.itab需要首先覆蓋整個頁面。 在到達html元素之前，每個直接父對象都會發生同樣的情況。

所以你的解決方法應該是

html, body, .vreditor-sdk, .building, .itab, .tab-content {
    height: 100%:
}

html占據頁面高度的100％，body占據html高度的100％，與頁面高度相同，依此類推...

這是頁面高度達到.tab-content