调整窗口大小时,以css为中心的div top会消失

时间:2015-02-21 13:59:12

标签: html css

我有一个垂直和水平居中的div框。

当我将窗口的大小调整为小于div的高度时,div会部分消失,滚动条不允许我向上滚动以显示缺少的部分。

如何解决此问题?

CSS

#main{
    position:absolute;
    width:400px;
    height:200px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    border:20px solid #000;
}
#container{
    position:absolute;
    width:100%;
    height:100%;
}

HTML

<div id="main">
<div id="container">I want to see this when scrolling up</div>
</div>

的jsfiddle: http://jsfiddle.net/skorpion/buwwypu0/

1 个答案:

答案 0 :(得分:3)

如果你想使用你的css,请使用这样的媒体查询:

@media (max-height: 200px) {
    #main {
        margin: 0 auto;
    }
}

在你的CSS末尾加上这个。应该做的。