5

私はこの質問を知っています:動的な幅に等しい高さ (CSS 流動レイアウト)

でももっと欲しい！！常に正方形のアスペクト比を持ち、最大高さと最大幅がページ (ウィンドウ要素) の 100% で、その上部が常に垂直方向と水平方向の中央に配置される柔軟なコンテナーが必要です。

このような：

// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
-      #######      -
-      #cont-#      -
-      #ainer#      -
-      #######      -
---------------------


// container matches width of the window
// container-width = 100%;  container-height = absolute-container-width
--page---
-       -
-       -
-#######-
-#######-
-#######-
-#######-
-       -
-       -
---------

純粋なcss（さらに優れたクロスブラウザ）でこれを達成することは可能ですか?

編集: css3 用のcalc() があることは知っていますが、モバイル ブラウザーのサポートが不十分なため、使用したくありません。

Edit2: どうやら 、私は自分自身を十分に明確にしていませんでした。ラッパーの高さと幅は、ウィンドウの高さと幅のどちらが小さいかに応じて一致する必要があります。正方形のコンテナは、ウィンドウの高さ/幅の小さい方の値を超えてはなりません。

これは、jQuery で行う方法です。

 // container/#main-wrapper has top: 50%,  left: 50%, position: absolute  via css  
 $(window).resize(function () {
    var $ww = $(window).width();
    var $wh = $(window).height();

    if ($ww > $wh) {
        $('#main-wrapper').css({
            height: $wh,
            width: $wh,
            marginTop : ($wh / 2) * -1,
            marginLeft : ($wh / 2) * -1
        });
    } else {
        $('#main-wrapper').css({
            height: $ww,
            width: $ww,
            marginTop : ($ww / 2) * -1,
            marginLeft : ($ww / 2) * -1

        });
    }
});
4

4 に答える 4

0

同様の div をコンテナーとして使用して、以前の概念をさらに一歩進めるとどうなるでしょうか。コンテナーには、最大高さと幅が追加されています。私はこれを試しましたが、コンテナはスクロールバーを投げません。自分で言うのもなんですが、なかなか面白い行動です。これはうまくいきますか？

<div id="container">
    <div id="centered">A DIV</div>
</div>

    #container {
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    position:absolute;
    width:200px;
    height:200px;
    max-width:100%;
    max-height:100%;
    background:#00f;
    padding:0;
}
#centered {
    background: green;
    bottom: 0;
    height: 80px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
}

更新されたフィドル: http://jsfiddle.net/djwave28/mBBJM/96/

于 2013-04-05T02:34:36.283 に答える