html - 要素を同じ高さにする

Question

このページの下部に、YouTube ビデオ、Twitter フィード、Similar Festivals カルーセルを並べて表示します。

YouTubeの動画と類似祭のコンテンツをTwitterのフィードと同じ高さにして、赤で示したスペースを埋めたいのですが、これらを高くする方法がわかりません。

Answer 1

最高の div の高さを取得し、これを他の div に適用する必要があります。これは、JavaScript を使用し、dom が完全にロードされた後にのみ実行できます。例によってjQueryのようなもので簡単です。

最良の方法は、同じ高さが必要なすべての div に、「fixthis」のような同じクラス名を付けることです。各 div を実行して高さを取得し、この高さをすべてに適用します。

$(関数(){

var new_height = 0;

$('.fixthis').each(function(){

    if($(this).height() > new_height) new_height = $(this).height();

}).height(new_height);

});

あなたの場合、YouTube パネルには「youtube」というクラスがあるため、ここから開始して他のパネルを見つけることができます。

$(関数(){

var new_height = 0;

$('.youtube').parent().find('> div').each(function(){

    if($(this).height() > new_height) new_height = $(this).height();

}).height(new_height);

});