子div高度100%内部位置：固定div + 自动溢出

我在尝试以下操作时遇到一些奇怪的行为（请参阅jsfiddle：http://jsfiddle.net/9nS47/ 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 的滚动条似乎始终可见（底部有一个额外的像素，我无法解释 [颜色：红色]）。

当滚动条可见时，Firefox 还会将第二个子元素移动到第一个子元素下方，因为滚动条似乎是内容区域的一部分，因此占用了大约 20px 的空间。但是，如果将 Overflow: Auto 替换为 Overflow:scroll，则不会发生这种情况。

ATM 无法更改布局（特别是位置：固定的容器）。

不要介意绿色和蓝色盒子之间的空间。看来是空格问题。

由于您似乎无法对“包装器”代码进行太多更改，因此我尝试尽可能少地更改您的原始代码。事实上，我唯一做的就是添加一些 jQuery。

查看这个更新的 jsfiddle http://jsfiddle.net/9nS47/6/。我已经包含了 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 会判断是否应该显示滚动条。

您的“自动”不起作用的原因是因为“固定”位置slider元素。浏览器无法完美地计算出高度。