我有一个侧边栏（蓝色），设置为向左浮动。我已将高度设置为 100%，将 body 和 html 高度设置为 100%。它工作正常：
问题是，当浏览器小于内容窗格 div（红色）时，侧边栏的高度将变得与浏览器的高度相同。因此，如果我向下滚动，侧边栏比页面短：
不过，主体会自行调整，其高度覆盖了内容窗格。但我猜侧边栏的高度就是窗口的高度，因为它设置为主体的 100%，主体设置为 html 的 100%，html 设置为窗口的 100%。我可以为 body 和 html 取出 100% 的高度，但这意味着我无法设置侧边栏的高度，这将使其尽可能短。
我真的很难过这里。任何帮助，将不胜感激
html:
<html>
<body>
<div id='menubar'>ignore this for now</div>
<div id='sidebar'>a few elements<div>
<div id='contentPane'>lots of elements</div>
</body>
</html>
css:
html,body{
padding:0px;
margin:0px;
height:100%;
}
#sidebar{
float:left;
height:100%;
}
SOLUTION
Hashem Qolami 通过包裹 div 并使用侧窗格的绝对定位解决了这个问题
html:
<body>
<div class="wrapper">
<div id='menubar'>note the height of this element</div>
<div id='sidebar'>a few elements</div>
<div id='contentPane'>a lot of elements</div>
</div>
</body>
css:
html,body{
padding:0px;
margin:0px;
height:100%;
}
.wrapper {
min-height: 100%;
position: relative;
background-color: gold;
}
#menubar {
height: 30px;
background-color: darkcyan;
}
#sidebar{
position: absolute;
left: 0;
top: 30px; /*HEIGHT OF THE MENU BAR*/
bottom: 0;
width: 200px;
background-color: orange;
}
#contentPane {
margin-left: 200px;
}
jsfiddle.net/hashem/J4WW9 http://jsfiddle.net/hashem/J4WW9
