CSS 等高レイアウトの一般的な方法

等高レイアウト

同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。

等高レイアウトの実装の観点からは、2つのカテゴリに分けることができます。

擬似高さ

サブ要素の高さの違いは依然として存在しますが、視覚的には高さが等しいという印象を与えます。

実高

サブ要素の高さは同じ

まず擬似等高実装方法を見てみましょう

負のマージンとパディングで実装

真の等高実装

テーブル
絶対
フレックス
グリッド
js

擬似等高 - 負のマージンとパディング

主にマイナスマージンで実装されます。具体的なマイナスマージンの実装については以下の記事を参照してください。

 <div class="レイアウト親">
        <div class="left"><p>左</p></div>
        <div class="center">
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
        </div>
        <div class="right"><p>右</p></div>
        <div style="clear: both;">111111111111</div>
    </div>

。親{
    位置: 相対的;
    オーバーフロー:非表示;
    色: #efefef;
}
。中心、
。左、
。右 {
    ボックスのサイズ: 境界線ボックス;
    フロート: 左;
}
。中心 {
    背景色: #2ECC71;
    幅: 60%;
}

。左 {
    幅: 20%;
    背景色: #1ABC9C;
}
。右 {
    幅: 20%;
    背景色: #3498DB;
}
。左、
。右、
。中心 {
    下マージン: -99999px;
    パディング下部: 99999px;
}

真の等高 - テーブルレイアウト

  <div class="レイアウト親">
        <div class="left"><p>左</p></div>
        <div class="center">
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
        </div>
        <div class="right"><p>右</p></div>
        <div style="clear: both;">111111111111</div>
    </div>

    。親{
        位置: 相対的;
        表示: テーブル;
        色: #efefef;
    }
    。中心、
    。左、
    。右 {
        ボックスのサイズ: 境界線ボックス;
        表示: テーブルセル
    }
    。中心 {
        背景色: #2ECC71;
        幅: 60%;
    }

    。左 {
        幅: 20%;
        背景色: #1ABC9C;
    }
    。右 {
        幅: 20%;
        背景色: #3498DB;
    }

真の輪郭 - 絶対

    <div class="レイアウト親">
        <div class="left"><p>左</p> </div>
        <div class="center">
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
        </div>
        <div class="right"><p>右</p></div>
    </div>

   。親{
        位置: 絶対;
        色: #efefef;
        幅:100%;
        高さ: 200px;
    }

    。左、
    。右、
    。中心 {
        位置: 絶対;
        ボックスのサイズ: 境界線ボックス;
        トップ:0;
        下:0;
    }
    。中心 {
        背景色: #2ECC71;
        左: 200px;
        右: 300px;
    }

    。左 {
        幅: 200ピクセル;
        背景色: #1ABC9C;
    }
    。右 {
        右:0;
        幅: 300ピクセル;
        背景色: #3498DB;
    }

真高 - フレックス

。親{
    ディスプレイ: フレックス;
    色: #efefef;
    幅:100%;
    高さ: 200px;
}

。左、
。右、
。中心 {
    ボックスのサイズ: 境界線ボックス;
    フレックス: 1;
}
。中心 {
    背景色: #2ECC71;
}
。左 {
    背景色: #1ABC9C;
}
。右 {
    背景色: #3498DB;
}

<div class="レイアウト親">
    <div class="left"><p>左</p> </div>
    <div class="center">
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
    </div>
    <div class="right"><p>右</p></div>
</div>

真の高さ - グリッド

    。親{
        表示: グリッド;
        色: #efefef;
        幅:100%;
        高さ: 200px;
        グリッドテンプレートの列: 1fr 1fr 1fr;
    }

    。左、
    。右、
    。中心 {
        ボックスのサイズ: 境界線ボックス;
    }
    。中心 {
        背景色: #2ECC71;
    }
    。左 {
        背景色: #1ABC9C;
    }
    。右 {
        背景色: #3498DB;
    }

<div class="レイアウト親">
    <div class="left"><p>左</p> </div>
    <div class="center">
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
        <p>私は真ん中の部分の内容です</p>
    </div>
    <div class="right"><p>右</p></div>
</div>

真の高さ-js

すべての要素の最も高い列を取得し、比較して変更します

    <div class="レイアウト親">
        <div class="left"><p>左</p> </div>
        <div class="center">
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
            <p>私は真ん中の部分の内容です</p>
        </div>
        <div class="right"><p>右</p></div>
    </div>

    。親{
        オーバーフロー:自動;
        色: #efefef;
    }
    。左、
    。右、
    。中心 {
        フロート: 左;
    }
    。中心 {
        幅: 60%;
        背景色: #2ECC71;
    }
    。左 {
        幅: 20%;
        背景色: #1ABC9C;
    }
    。右 {
        幅: 20%;
        背景色: #3498DB;
    }

     // 最も高い要素の高さを取得します。 var nodeList = document.querySelectorAll(".parent > div");
    var arr = [].slice.call(nodeList,0);
    var maxHeight = arr.map(function(item){
        item.offsetHeight を返す
    }).sort(関数(a, b){
        a - b を返します。
    }）。ポップ（）;
    arr.map(関数(アイテム){
        if(item.offsetHeight < maxHeight) {
            item.style.height = maxHeight + "px";
        }
    });