jQueryまたはCSSを使用して複数のDiv要素を同じ高さにする方法?

jQuery または CSS を使用して要素の高さを等しくする方法

Web 開発では、見た目が美しく一貫したレイアウトを実現するために要素を垂直に配置することが重要です。この質問は、さまざまな量のコンテンツが含まれている場合でも、同じ高さの複数の div 要素を作成するという課題に対処します。

jQuery ソリューション

人気の JavaScript ライブラリである jQuery は、識別するための簡単なアプローチを提供します。最も高い要素を選択し、それに一致するように他の要素の高さを設定します。

$(document).ready(function() {
   var maxHeight = 0; // Initialize maxHeight to 0

   $('.features').each(function() { // Loop through each .features div
     if ($(this).outerHeight() > maxHeight) { // Compare the current div's height to maxHeight
       maxHeight = $(this).outerHeight(); // Update maxHeight if the current div is taller
     }
   });

   $('.features').each(function() { // Loop through each .features div again
     $(this).height(maxHeight); // Set the height of each div to maxHeight
   });
});

このスクリプトは、最も高い div の高さを計算し、それを「.features」クラスを持つすべての div に割り当て、結果として高さが等しくなります。

CSS のみの解決策

CSS には直接的な高さの選択や比較機能がありませんが、CSS グリッドを使用した回避策が可能です。

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(initial, 1fr));
  align-items: stretch;
}

.features {
  height: 100%;
}

以上がjQueryまたはCSSを使用して複数のDiv要素を同じ高さにする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。