jQueryを使ってDivの高さを同じに調整する

例えば、次のようにカーンの内容の量が異なりカーンの高さがまちまちである場合カーンの高さを同じに調整したい場合があります。

<div class="container">
    <div class="column">3줄<br />3줄<br />3줄</div>
    <div class="column">1줄</div>
    <div class="column">2줄<br />2줄</div>
</div>
<div class="container">
    <div class="column">1줄</div>
    <div class="column">2줄<br />2줄</div>
    <div class="column">1줄</div>
</div>

この場合、次のjQueryを使用してDivクラスがcontainerである要素の下のcolumnクラスの高さを同じように調整することができます。

$(document).ready(function(){

$('.container').each(function(){
var highestBox = 0;
$('.column', this).each(function(){

if($(this).height() > highestBox)
highestBox = $(this).height();
});

$('.column',this).height(highestBox);

});

});
// Source: http://stackoverflow.com/

Setting equal heights for divs with jQuery


上では、各containerの下のcolumnクラスのみ同じ高さが適用されてcontainerごとに独立しています。 少し別の方法で同じすべてのクラスの高さを同じに調整するjQueryを考えてみることができます。 この場合は、次のようなjQueryコードを使用することができます。

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

$(document).ready(function(){
equalHeight($(".EqHeightDiv"));
});
// Source: http://www.leonamarant.com/

このスクリプトを適用してみると以下のように同じすべてのクラスのDIVの高さが同じに調整されていることを知ることができます。

Setting equal heights for divs with jQuery 2

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

コメントを残す

*メールアドレスは公開されません。