ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

<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



コメントを残す

コメント