0

ゴール：

  • ウィンドウの幅と高さがどちらも小さい場合、div はウィンドウと同じサイズにする必要があります。

  • ウィンドウの幅が大きすぎる場合 (>max-width)、div はその幅を max-width のままにして、水平方向の中央に配置する必要があります。

  • ウィンドウの高さが大きすぎる場合 (>max-height)、div はその高さを max-height のままにし、垂直方向に中央揃えにする必要があります。

以下の例は、最後の点を除いてすべてを達成しています。

このdivをウィンドウの垂直方向に中央揃えにする方法は? つまり、赤い領域を緑の領域のように動作させたいのですが、水平ではなく垂直にします。

(このデザインは、モバイル デバイスの画面のレスポンシブ デザインを目的としています。可能であれば、JS の関与はありません。)

<!doctype html>
<html>
        <head>
                <style>
                        body,html{
                                height:100%;
                                margin:0px;
                                background:green;
                                }
                        #t1{
                                position:relative;
                                height:100%;
                                max-width:640px;
                                margin:0 auto;
                                background-color:red;
                        }
                        #t1-1{
                                position:absolute;
                                height:100%;
                                max-height:640px;
                                width:100%;
                                background-color:#dddddd;

                                overflow:hidden;/*demo purpose*/
                        }
                        /*the following stuff are for demo only*/
                        img{
                                position:absolute;
                                opacity:0.5;
                        }
                        img.w{
                                width:100%;
                        }
                        img.h{
                                height:100%;
                        }
                </style>
        </head>
        <body>
                <div id="t1">
                        <div id="t1-1">
                                <img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
                                <img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
                        </div>
                </div>
        </body>
</html>

PS この例では、一部のデスクトップ ブラウザが内部で min-width 値を全体に設定し (例: Chrome では 400px)、div が水平方向に縮小し続けるのを無効にしています。

4

3 に答える 3

1

それを機能させるには、小さなJavaScriptが必要になる場合があります。

まず、<div>レイアウトする要素が必要なので、私はそれをマスクと呼びました：

<div id="mask"></div>

次に、ドキュメント全体を埋めるようにスタイルを設定し、とを指定しmax-widthますmax-height。

<style>
    #mask {
        position: fixed;
        height: 100%;
        max-height: 400px;
        width: 100%;
        max-width: 400px;
        top: 0;
        left: 0;
        background: red;
    }
</style>

このスタイルはセンタリング作業を実行しないため、JavaScriptを実行する必要があります。これにはlayoutMask、divをセンタリングする必要があるかどうかを判断する関数があります。

var mask = document.getElementById('mask');
function layoutMask() {
    // here 400 is the same as the max-width style property
    if (window.innerWidth >= 400) {
        mask.style.left = '50%';
        // to ensure centering, this sould be (max-width / 2)
        mask.style.marginLeft = '-200px';
    }
    else {
        mask.style.left = '';
        mask.style.marginLeft = '';
    }

    // the same as width
    if (window.innerHeight >= 400) {
        mask.style.top = '50%';
        mask.style.marginTop = '-200px';
    }
    else {
        mask.style.top = '';
        mask.style.marginTop = '';
    }
}

最後に、この関数をresizeイベントに割り当て、すぐに実行して<div>、最初のロードで正しく配置されたことを確認します。

if (window.addEventListener) {
    window.addEventListener('resize', layoutMask);
}
else {
    window.attachEvent('onresize', layoutMask);
}
layoutMask();

Chromeでこれを試しましたが、IE6はスタイルをサポートしていないため、IE6では機能しないと確信していますがposition: fixed;、ほとんどのブラウザーで機能するはずです。

テスト用にjsfiddleを作成しました。

于 2013-01-29T09:43:37.837 に答える
0

私の知る限り、height:100%それは不可能です。あなたは<center>それを水平方向と垂直方向に中央に保つために使用する必要があります。マージンも使用する必要がある場合があります。好き：

margin-top:18%;
margin-left:40%;
于 2013-01-29T09:40:50.127 に答える
0

@mediaこの効果を達成するためにクエリを追加できます

@media (min-height: 640px) {
    #t1-1 {
        top: 50%;
        margin-top: -320px;
    }
}

テストについては、 JSFiddleを参照してください。

于 2013-01-30T00:29:45.013 に答える