Question

I have the following CSS that I use to vertically center a DIV on a page (and horizontally center it as well). If the height of the browser window is less than 600px, I would like the window to be able to scroll to show the entire DIV. However, the DIV just centers itself on the page and anything beyond the height of the browser is hidden–no scroll bars. Is there any way to allow the user to scroll to these now hidden regions?

#container{
    width:800px;
    height:600px;
    position:absolute;
    margin-top:-300px;
    top:50%;
    margin-left:-400px;
    left:50%;
}

Answer 1

Add a @media query for max-width and max-height

@media (max-width: 800px) {
    #container {
        left: 0px;
        margin-left: 0px;
    }
}

@media (max-height: 600px) {
    #container {
        top: 0px;
        margin-top: 0px;
    }
}

JSFiddle