0

我有一个简单的页面、一个容器 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;
}
4

1 回答 1

0

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

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

请参阅更新的小提琴。

于 2013-10-14T09:19:07.437 回答