关于html:100%高度的问题

Problems with 100% height

我正在尝试使用宽度为 20%、高度为 100% 的侧面板,以便它们根据浏览器的宽度和高度等重新调整大小。我遇到了高度问题(100%) CSS 的一部分,但它似乎不适合浏览器窗口的整个高度 - 它只显示侧面板中的 100%。

无论里面有多少内容,如何使侧面板到达页面底部?

1
2
3
4
5
6
7
#sidebar{
    float:left;
    position: relative;
    width: 20%;
    height: 100%;
    background-color: red;
}


身高100%总是很痛苦。

确保 html, body 也有 height: 100% 和任何包裹它的 div


当你用百分比设置某些东西时,你必须始终考虑"百分比什么?"它总是元素的父元素。那么父设置是什么?如果父级没有以单位定义的高度,则百分比没有参考。


我在做的一个项目中遇到了同样的问题,因此我修复了它:

1
2
3
4
5
6
#sidebar{
    min-height:100%;
    height:auto !important;
    height: 100%;
    //add other styling needed
}