100％高度的問題

Question

我試圖使用寬度爲20％和高度爲100％的側面板，以便它們根據瀏覽器的寬度和高度等重新調整大小等。我遇到了問題與CSS的高度（100％）部分一樣，它看起來並不適合瀏覽器窗口的整個高度 - 它只是顯示側面面板內容的100％。

我怎樣才能使側面板到達頁面的底部，無論它裏面有多少內容？

#sidebar{ 
    float:left; 
    position: relative; 
    width: 20%; 
    height: 100%; 
    background-color: red; 
} 

Answer 1

身高100％總是很痛苦。

請確保html, body也有height: 100%和包裝它的任何div。

Answer 2

當您用百分比設置某些東西時，您必須始終考慮「百分比是什麼？」。它始終是元素的父項。那麼父母設置了什麼？如果父母沒有定義的單位高度，百分比沒有參考。

Answer 3

我有一個項目，同樣的問題我工作，我固定它這樣的：

#sidebar{ 
    min-height:100%; 
    height:auto !important; 
    height: 100%; 
    //add other styling needed 
}