CSSを使用してDIV二つの高さを同じにする

前jQueryでDivの高さを同じに調整する方法をXNUMX回に渡って見てみました（下の参考リンクを参照）。 以下は、CSSを使用して複数DIVの高さを同じに設定する方法です。

HTML  例：

<div class="row">
<div class="col">내용 1</div>
<div class="col">내용 2</div>
</div>

flexboxを使用して、同じ要素の高さを同じにすることができます。

.row {
display: flex; /* 하위 요소(child)의 높이를 동일하게 조정 */
}

.col {
flex: 1; /* 이 코드를 가하면 폭도 동일하게 조정됩니다 */
}
// Source: stackoverflow

ここデモを確認することができます。 上記のdisplay：flex;を追加すると、子要素の高さが同じに設定されます。 子要素でflex：1;を追加すると、幅（幅）も同じように設定されます。

第二の方法でテーブル（表）のレイアウトを使用したものです。 IE 8、IE 9をサポートするには、この方法を使用する必要があります。

.row {
display: table;
}

.col {
display: table-cell;
width: 50%; /* 컬럼(열) 수에 따라 조정 */
}

デモは ここで確認することができます。

通常はjQueryを使って簡単にdivの高さを同じように調整することができます。 しかし、場合によっては、環境に応じて、jQueryや、上記の方法がうまく動作しない場合もあります。 （例えば、 WordPress テーマである Avadaでさまざまな方法を試してみたがうまくいかないですね。 そのような場合には、他の方法を探さなければならそうです。）

メモ：

• jQueryでDivの高さを等しく調整する - I
• jQueryでDivの高さを等しく調整する - II