0

シンプルなページ、コンテナ div、タイトル div があります。タイトル div はコンテナーに含まれています (そうです、ネーミングに最適な選択ではないことはわかっていますが、ここでのポイントではありません)。

2 つの 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