CSS: Div to float down if page is scrolled

I am trying to create a fixed div, so that even if i scroll down the page, the div remains in the center of the page. But I'm having a problem that some part of the div remains hidden even if scroll down the page. Please see this jsfiddle demo to see the code and the problem.

HTML:

<div class="wrap">
    <div class="main">Normal div </开发者_如何学Godiv>
    <div class="box">This should be in the slide down if page is scrolled down.</div>   
</div>

CSS:

.wrap{
    border: 1px solid green;
    width:500px;
    overflow:auto;
    margin:0 auto;
}

.main{
    border:1px solid blue;
     width:400px;
    float:right;
}

.box{
    border:1px solid red;
    width:85px;
    top:200px;
    position: fixed;
}

When an element is absolutely positioned or fixed, you can use the top and bottom CSS properties to force the element to fill exactly the screen's height:

.box{
border:1px solid red;
position: fixed;
width:85px;
bottom:0px;
top:0px;
overflow-x: hidden;
overflow-y: auto
}

Or to be vertically centered on the screen:

.box{
border: 1px solid red;
position: fixed;
width:85px;
bottom: 20%;
top: 20%;
overflow-x: hidden;
overflow-y: auto
}

The rule overflow-y: auto ensures that a vertical scrollbar will appear if needed, while the rule overflow-x: hidden; is there to prevent a horizontal scroolbar from showing up.

If you don't want to go through the pain of javascript, just set top, height and overflow attributes for .box. Your problem is that you haven't set height and overflow. For example:

.box{
    border:1px solid red;
    width:85px;
    top:200px;
    position: fixed;
    height: 200px;
    overflow: scroll; /* or hidden */
}

Use the following javascript to center you div on a screen

<script type="text/javascript">
    function getwidth() {       
        if (typeof (window.innerWidth) == 'number')
            return window.innerWidth;
        else if (document.documentElement && document.documentElement.clientWidth) //IE 6+
            return document.documentElement.clientWidth;        
        return 0;
    };

    function getheight() {      
        if (typeof (window.innerHeight) == 'number')
            return window.innerHeight;
        else if (document.documentElement && document.documentElement.clientHeight) //IE 6+
            return document.documentElement.clientHeight;       
        return 0;
    };

    function getscroll() {      
        if (self.pageYOffset)       
            return self.pageYOffset;
        else if (document.documentElement && document.documentElement.scrollTop)
            return document.documentElement.scrollTop;
        else if (document.body)     
            return document.body.scrollTop;     
        return 0;
    };

    function show(mydivW, mydivH) {
        var w = getwidth() / 2 - mydivW / 2;
        var h = getheight() / 2 - mydivH / 2 + getscroll();
        var box = document.getElementById('mydiv');
        box.style.top = h + 'px';
        box.style.left = w + 'px';
        box.style.display = 'block';
    };
</script>

It's the behaviour of fixed position, if you don't know the height of the fixed <div> you cannot center it vertically with only CSS. However you can use some JavaScript tricks to adapt the sidebar with the screen resolution like here.