Question

我有一个简单的页面，一个容器div和一个标题div。标题div包含在容器中（是的，我知道它不是命名的最佳选择，但这不是重点）。

两个div具有固定高度（最小高度）。我的目标是在浏览器窗口中获取一个垂直居中的页面。当浏览器窗口大于容器div高度时，我希望容器div垂直居中在页面中。当浏览器窗口小于容器div高度时，我希望页面顶部的容器div显示其包含的div标题。

我在这里使用的代码可以很好地使用Firefox，但是Safari存在问题：当浏览器窗口的高度小于内容高度时，标题div变得不可见。

请您知道这个问题的解决方案是什么？小提琴是：http://fiddle.jshell.net/D4xWr/

代码;

<body>
<div id="container">
    <div id="header_title">
        TITLE
    </div>
</div>

CSS

 * {
padding:0; 
margin:0;}

html,body {
height:100%;
}

body {
font-family:Verdana, Geneva, sans-serif;
font-size:62.5%;
color:#734d08;
line-height:16px;
background-color:#00ffcc;
}


#container{
margin: auto;
position: absolute;
height:80%;
min-height:520px;
width:970px;
min-width:970px;
top: 0; left: 0; bottom: 0; right: 0;
background-color:#00ffcc;
border:1px solid red;
    }

#header_title{
background-color:white;
height:70px;
min-height:70px;
width:100%;
border:1px solid;
}

Answer 1

问题是垂直居中的技巧在Safari（以及Chrome和IE）中运行得很好。一种解决方案是向CSS添加媒体查询，以防止在较小的屏幕上显示此技巧。

@media screen and (max-height:520px) {
    #container {bottom:auto}
}

请参阅updated fiddle。

由于垂直居中，因此在Safari中不可见

1 个答案: