CSS全宽高度固定可滚动容器

Question

I load a div thanks to pushstate history and I want to display it by sliding the div from the bottom to the top.

For the sliding animation I use css3 transition triggered with jquery addclass.

However, I have a lot of difficulties to obtain a full screen fix div container. This container must be scrollable also. The container doesn't fill all the screen with this css:

html, body{
    position : relative;
    margin: 0;
    padding: 0;
    min-heigth: 100%;
}
#ajaxify_container {
    position: fixed;
    display: block;
    z-index: 9999;
    min-width: 100%;
    min-height: 100%;
    top: 100%;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.95);
    -moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.95);
    box-shadow: 0px 0px 25px rgba(0,0,0,0.95);
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
} 
.ajaxify_container-animated {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);   
}

Sorry for my English, I'm French

Answer 1

Actually min-height in html/body is useless, it should be height if you want to use min-height for #ajax-container.

Beside, position:fixed refers to screen window. height100%; + width:100%; + overflow:auto; is plenty enough to fill the window and see it scroll if needed.

Your fiddle updated : http://jsfiddle.net/j2Yqc/4/

#single-container {
    min-height: 100%;
    padding:5px;
    background: rgb(33,35,37);
}