100％高度的問題

Question

我正在嘗試使用寬度為20％，高度為100％的側面板，以便它們將根據瀏覽器的寬度和高度等來調整大小。我的高度（100％）部分有問題的CSS，它似乎並不適合瀏覽器窗口的整個高度-它僅顯示側面板內容的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
}