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
}