1

理由はわかりませんが、これを読みやすい質問にしようとして苦労していますが、ここに行きます。

ブラウザーの高さを埋める 2 つの積み重ねられた正方形の div を持つ方法を見つけようとしています。幅に基づいて div の正方形を維持する多くの方法を検索して見つけましたが、ビューポートの高さに基づいて何かを見つけることができないようです。

私がこれまでに持っているもの: http://codepen.io/jointmedias/full/mxlLC

基本的に、上記の例から、ブラウザーの高さや幅に関係なく、赤と紫の div を常に正方形にする必要があります。

ヒントはありますか？ありがとうございます。

ブライアン

4

4 に答える 4

3

CSS のみの解決策:

.side-top, .side-bottom {
    width: 50vh;
    height: 50vh;
}

デモ

vhCSS3 Values and Unitsの一部であるビューポートの高さのパーセンテージ単位です。

ビューポート CSS ユニットのサポートは、最近では非常に優れています。サポート表を参照してください。

IE<=8 および Android ストック ブラウザをサポートする必要がある場合は、JS フォールバックが必要になります。

于 2013-10-20T19:32:56.537 に答える
0

これは、私が思いついた単純な jQuery ベースのソリューションです ( http://codepen.io/terrymun/pen/nEDoA ):

$(function() {
  var $w = $(window);

  $w.resize(function() {
    $(".side-content > div")
      .height($w.height() * 0.5)
      .width($w.height() * 0.5);
    $(".main-content")
      .width($w.width() - $w.height() * 0.5);
  }).resize();
});

この関数の背後にあるロジックは単純です。DOM の準備ができたときに .resize() イベントを発生させ (したがって連鎖)、.resize() イベントをリッスンします。簡単にするために、jQuery オブジェクト$wをに割り当てました。$(window)

ヒント:一部のブラウザーではイベントが頻繁に発生し、サイズ変更時にサイトのパフォーマンスが低下する可能性があるため、イベントを調整することをお勧めします。.resize()

また、自由に CSS をもう少し単純化しました。

.side-content > div {
  position: absolute;
  right: 0;
}
.side-top {
    background: red;
}
.side-bottom {
    background: purple;
    top: 50%;
}
于 2013-10-20T19:37:27.057 に答える
-1

Html とブラウザーは要素の高さ (ピクセル単位で指定されていない高さ、cm...) が非常に苦手なので、javascript の使用を検討してみませんか? これは jquery で簡単に実行できます。

$(window).resize(function () {
            //perform any resize logic here
            //I use timeout logic here so that the resizing function does
            //not repeat so many times and consume more resources than it should
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(adjustNews, 100);
        });
function adjustNews() {
        $('.yourTwoElementsByClass').css({ width: $(this).height() + "px" });
    };
于 2013-10-20T19:30:14.067 に答える
-1

純粋な CSS でこれを行うことはできません。次のような Javascript 関数を作成する必要があります。

  • ブラウザのビューポートのサイズが変更されたときに呼び出されます
  • 2 つのブロックのうちの 1 つの高さを取得します
  • ブロックの幅を取得した高さに設定します

Javascript を使用してブロックの高さを設定することもできますが、CSS を使用して既に固定されています。

于 2013-10-20T19:30:21.130 に答える