child div height 100% inside position: fixed div + overflow auto

Question

I am experiencing some strange behaviour when attempting the following (see 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;
}

What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).

Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.

ATM changing the layout (specifically the Container with Position: fixed) is not an option.

Don't mind the space between the green and the blue box. Seems to be a whitespace problem.

Answer 1

Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.

Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:

$(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");   
    }  
});

Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.

The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.