Question

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 </div>
    <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;
}

Answer 1

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.