0

現在、全体の高さが 750px に設定されている Web サイトがあります。絶対位置と負のマージン方法を使用して、垂直方向に中央揃えにしています。1つの問題を除けば、うまく機能します。

低解像度のモニターやモバイル デバイスで使用しようとすると、ページの上部が切り取られます。

これが私のコードです

HTML

<body>
<div class="content">
CONTENT IS HERE
</div>
</body>

CSS

.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px; /* Half of 750px */
}

overflow:scroll; を使用してみました。body タグに記載されていますが、動作しないことは理解しています。動作するとは思っていませんでした。私は完全に困惑しています！何か提案はありますか？

4

3 に答える 3

4

小さな画面では、メディアクエリで上書きできます。

.content {
    position:absolute;
    top:50%;
    height:750px;
    margin-top:-375px;
}
@media only screen and (max-height: 750px){
    .content {
        top:0;
        margin-top:0;
    }
}

実際には、これはグレースフル デグラデーション メソッドですが、モバイル向けに設計している場合は、プログレッシブ エンハンスメントの方法でアプローチすることをお勧めします。その場合、次のようになります。

.content {
    height:750px;
}
@media only screen and (min-height: 751px){
    .content {
        position:absolute;
        top:50%;
        margin-top:-375px;
    }
}

互換性について言えば、only後のキーワードは@media、古いブラウザーが含まれているルールをレンダリングできないようにします。

(ほぼ) 完全な互換性を実現するには、次の非常に便利なプラグインを使用できます: Respond.js

于 2012-09-25T22:40:16.623 に答える