Geek asks and answers

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

I experience strange behavior when I try to do 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'm trying to do is make a navigation bar on the left, which covers the entire visible height of the window and only shows the scroll bar if its height is less than, for example, 400 pixels. The scrollbar for this div seems to always be visible due to some resizing problems (there is an extra pixel at the bottom, I can't explain [color: red]).

Firefox , , , -, , , 20 . , Overflow: Auto Overflow: .

ATM, ( , : ), .

. , .

+5
1

, "", . , , , jQuery.

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 , .

, "" , "" slider. .

+3

More articles:


All Articles