div元素的高度與100％時不匹配父級的高度

我試圖使用兩個導航欄和粘滯頁腳的面板製作引導程序佈局。div元素的高度與100％時不匹配父級的高度

我希望我的邊欄具有一路向下的背景色。但是當我的右側面板有更多的內容時，我的左側面板的背景顏色不會一直走到底部。我的導航欄和容器放置在一個div標籤內，容器包含右側和左側面板。我希望右側和左側面板滾動到一起，不希望它們具有單獨的滾動條。我的代碼如下所示：

body, html, .row-offcanvas { 
    height: 100%; 
    overflow: auto; 
} 
body { 
    padding-top: 50px; 
} 
#sidebar { 
    height: 100%; 
    min-width: 290px; 
    max-width: 220px; 
    background-color: #f5f5f5; 
    float: left; 
    position: relative; 
} 
#main { 
    overflow-x: auto; 
}

鏈接的jsfiddle：http://jsfiddle.net/amirshadaab/ouqda63m/

在m邊欄有100％的高度，它沒有考慮父容器的高度，但在中，當停止我擺脫高度：100％從側邊欄，我的側面板的背景只是直到內容結束，並沒有完全下降。我在這裏做錯了什麼？

來源

2014-10-01 Amir Shadaab Mohammed

'min-height：100％;'？ - http://jsfiddle.net/L7rrmyfw/ – Anonymous 2014-10-01 17:05:41

最小高度：100％與高度相同：100％。它不會將背景顏色一直放在底部。 – 2014-10-01 17:08:16

試試這個 - http://jsfiddle.net/w6zppc65/ – Anonymous 2014-10-01 17:58:59

它的工作原理是，因爲你的包裝row-offcanvas是100％的高度和可滾動。邊欄採用相同的高度，但不可滾動。這就是爲什麼它在達到目的之前「結束」。

刪除height: 100%它的工作原理。

來源

2014-10-01 17:05:57 TheFrozenOne

背景不會一直走到底部。我如何讓它一直到底部填充包裝？ – 2014-10-01 17:07:15

@StreetSoldier使用'min-height：100％'而不是'height：100％' – Pointy 2014-10-01 17:07:38

請參閱我的編輯：刪除高度100％; – TheFrozenOne 2014-10-01 17:07:50

div元素的高度與100％時不匹配父級的高度

回答

相關問題