CODEWITHSUNDEEP
jquerycss
Joe
Joe

Reputation: 1635

Floated Div Overflow Scroll Browser

I have a div that is fired on a jQuery call. I am using this css

.Window {
    display:none;
    background-color:#FFFFFF;
    z-index:1;
    min-width:500px;
    min-height:180px;
    top:20%;
    position:fixed;
    left:50%;
    margin-left:-250px
}

Basically the div hovers over the content in the center of the screen. The problem is, when I place additional content within the .Window div and the div is taller than the browser itself, the browser window does not scroll. What would I do to make the browser window scroll so it shows the entire div with its elements inside?

Upvotes: 0

Views: 194

Answers (4)

Nidis
Nidis

Reputation: 71

Well maybe i found something that will be useful for you. Make a div element which will cover all the screen with a css like that




         width:100%;
         height:100%;
         position:fixed;
         top:0;
         overflow:auto;

Don't put any background and don't forget the overflow.

Then in this div place your div but with relative position. The css looks like





    .Window {
        background-color:#FFFFFF;
        z-index:1;
        width:500px;
        height:180px;
        top:20%;
        position:relative;
        margin:auto;
    }

With the margin:auto the element go to center horizontaly and with top go 20% from the top of the first div, ie the top of the browser.

I hope help you!!!

Upvotes: 0

Nidis
Nidis

Reputation: 71

The position:fixed place the element relative to the browser window. The div will stay in the same position. So you need to change the position property to an other.

Upvotes: 0

stewe
stewe

Reputation: 42622

Just replace position:fixed; with position:absolute;

Upvotes: 2

gpasci
gpasci

Reputation: 1440

In the parent div

overflow: scroll;

Upvotes: 0

Related Questions