Question

Code given:

http://jsfiddle.net/95u9Q/

#wrapper_login {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background: black;
}

#login {
    z-index: 22;
    width: 300px;
    height: 400px;
    margin: -200px auto 0 auto;
    background: #000;
}

The centering works fine! The Problem is: If having a windows height below 400px the full #login should be visible and scrollable. currently a scrollbar is visible, but it is not possible to see the full #login, the scrollbar just don’t contains the whole #login.

I think its because of position absolute and the negative margin-top, also I don’t know how to improve the code so it works in the way it should.

Thanks in advance for the help!

Answer 1

Looks like a job for a media query

@media screen and (max-height: 400px) {
 #wrapper_login { position: static; }
 #login { margin: 0 auto; }
}

http://jsfiddle.net/95u9Q/2/