css - css 全宽高度固定可滚动容器

Question

由于 pushstate 历史记录，我加载了一个 div，我想通过将 div 从底部滑动到顶部来显示它。

对于滑动动画，我使用由 jquery addclass 触发的 css3 过渡。

但是，我很难获得全屏修复 div 容器。这个容器也必须是可滚动的。容器不会用这个 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%);   
}

对不起我的英语，我是法国人

Answer 1

实际上 html/body 中的 min-height 是没用的，如果你想为#ajax-container 使用 min-height ，它应该是 height 。

另外， position:fixed 指的是屏幕窗口。高度100%；+ 宽度：100%；+溢出：自动；足以填满窗口并在需要时看到它滚动。

你的小提琴更新了：http: //jsfiddle.net/j2Yqc/4/

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