关于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; } |
相关讨论
- 侧边栏周围还有其他元素吗？某种package？我们也需要那个代码。
身高100%总是很痛苦。
确保 html, body 也有 height: 100% 和任何包裹它的 div。
当你用百分比设置某些东西时，你必须始终考虑"百分比什么？"它总是元素的父元素。那么父设置是什么？如果父级没有以单位定义的高度，则百分比没有参考。
相关讨论
- 是的，这可能是它在一个名为 main_content 的 div 中的问题，该 div 设置为 100%，我可以绕过那个因为我也需要那个 div 作为浏览器的高度。 #main_content{ \\tfloat:left; \\t 宽度：100%； \\高度：100%； \\t \\t}
- @DanFarrell 视口是您在窗口中看到的内容，它是 html 的父级，它是 body 的父级。因此，将它们设置为 100% 将使用视口作为参考。
我在做的一个项目中遇到了同样的问题，因此我修复了它：
|
1
2 3 4 5 6 |
#sidebar{
min-height:100%; height:auto !important; height: 100%; //add other styling needed } |