尝试以下操作时遇到一些奇怪的行为(请参阅jsfiddle：
http://jsfiddle.net/9nS47/).
HTML：
<div id="slider">
<div id="wrapper">
<div id="navigation"></div>
<div id="container">
<div id="button"></div>
</div>
</div>
</div>
CSS：
HTML,BODY
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
position: fixed;
top: 0;
bottom: 0px;
left: 100px;
overflow-y: auto;
background-color: red;
}
#wrapper
{
position: relative;
height: 100%;
background-color: #000000;
min-height:400px;
}
#navigation
{
display: inline-block;
width: 80px;
height: 100%;
background-color: #0000FF;
}
#container
{
display: inline-block;
height: 100%;
background-color: #00FF00;
}
#button
{
width: 22px; height: 100%;
float:right;
background-color: #CCFFCC;
cursor:pointer;
}
我要做的是制作一个横跨整个可见窗口高度的左侧导航栏,如果其高度小于例如400px,则仅显示滚动条.由于一些调整大小问题,该div的滚动条似乎总是可见的(底部有一个额外的像素我无法解释[color：red]).
当滚动条可见时,Firefox还会将第二个子元素移动到第一个元素下方,因为滚动条似乎是内容区域的一部分,因此占用大约20px的空间.如果Overflow：Auto被Overflow替换,则不会发生这种情况：滚动.
ATM改变布局(特别是位置：固定的容器)不是一种选择.
不要介意绿色和蓝色框之间的空间.似乎是一个空白问题.
解决方法
由于您似乎无法更改“包装”代码,因此我尝试尽可能少地更改原始代码.事实上,我唯一做的就是添加一些jQuery.
查看this updated jsfiddle.我已经包含了jQuery,我添加的javascript是这样的：
$(window).bind("load resize",function(){
//this runs as soon as the page is 'ready'
if($(window).height() < 400){
$("#slider").css("overflow-y","scroll");
}else{
$("#slider").css("overflow-y","hidden");
}
});
基本上,’onload’和’onrezise’,jQuery会判断你是否应该显示滚动条.
“自动”不起作用的原因是滑块元素的“固定”位置.浏览器无法完美地找出高度.
