jQuery를 사용하여 여러 개의 div를 동일한 높이로 유지하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/803688

  •  03-07-2019
  •  | 
  •  

문제

다른 양의 텍스트 내용을 가진 몇 가지 DIV 태그가 있습니다.

HTML :

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

그들은 2 ~ 2 개의 레이아웃에 있고 폭은 유동적입니다.

CSS :

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

나는 그들 모두 같은 높이를 원합니다.

그래서 나는 그들을 통해 고리하고 가장 높은 높이의 높이를 찾습니다. 그런 다음 다시 반복하여 모든 것을 그 높이로 설정합니다.

jQuery :

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

DIV의 높이가 다시 변경 될 필요가 없으면 잘 작동합니다.

그러나 브라우저 창을 크기를 조정하면 실패합니다.

  1. 내가 (a) 브라우저를 더 넓게 만들면 (b) 내 div가 더 넓어지면 (c) 텍스트 내용이 더 적은 시간을 감싸고 (d) 내 div가 너무 키가 큽니다.

  2. 내가 (b) 브라우저를 더 좁게 만들면 (b) 내 div가 더 좁아지면 (c) 텍스트 내용이 더 많이 감싸고 (d) 내 div가 너무 짧습니다.

둘 다 (1) 정상과 같은 내용의 높이까지 DIV를 자동으로 크기로 크기를 유지하지만 (2) 여러 개의 div를 같은 높이로 유지합니까?

도움이 되었습니까?

해결책

업데이트... 실험하고 다른 방법으로 실험 할 수있는 방법을 실험하고 찾은 후이 답변을 완전히 다시 작성하십시오.

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

내가 알아 차린 한 가지는 IE가 실제로 50% 넓은 플로트 디브로 반올림 문제가 있다는 것입니다. 49%로 변경하면 렌더링이 훨씬 좋았습니다.

이 jQuery는 작동합니다 ...

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
    var currentWidth = $(window).width();
    if (previousWidth != currentWidth) {
        doAdjust = true;
    }
    previousWidth = currentWidth;
})

// every half second

$(function() {
    setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
    if (doAdjust) {
        adjustBoxHeights();
        doAdjust = false;
    }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        $(this).height('auto');
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
}

다른 팁

저처럼 Google을 검색하여 해결책을 찾아 여기에 온 다른 사람들에게는 다음과 같은 답변의 주먹 부분이 첫 번째 Div가 가장 높을 때만 작동합니다. 나는 그것에 약간의 변경을했고 이제는 모든 경우에 효과가있는 것 같습니다.

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

이것을 확인하십시오 jQuery 플러그인 이를 통해 높이와 같은 CSS 속성을 모니터링 할 수 있습니다.

크기를 조정할 때 작동하기를 원한다면 ... 이렇게하십시오.

function sortNumber(a,b) {
    return a - b;
}

var highest = 0;

function maxHeight() {
    var heights = new Array();
    $('.equalheight div').css('height', 'auto');
    $('.equalheight div').each(function(){
        heights.push($(this).height());
    });        
    heights = heights.sort(sortNumber).reverse();
    highest = heights[0]; 
    $('.equalheight div').css('height', highest);
}

$(document).ready(maxHeight);
$(window).resize(maxHeight);

나는이 솔루션이 내 상황에 대해 좀 더 깔끔한 것을 발견했다. 어떤 DIV가 가장 높은지에 관계없이 작동합니다. 이 오래된 Chris Coyier를 기반으로합니다 CSS 트릭에 게시하십시오.

function maxHeight() {
    var maxHeight = 0;
    $(".container > .post-box").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(".container > .post-box").height(maxHeight);
}

$(document).ready(function() {
    maxHeight();
}

$(window).bind('resize', function () {
    $(".container > .post-box").css('height', 'auto');
    maxHeight();
}).trigger('resize');

그러나 함수를 다시 실행하기 전에 크기를 조정하여 높이를 자동으로 설정해야했습니다. CSS에서 설정 되었기 때문에 원래 기능으로 설정할 필요가 없었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top