jQuery를 사용하여 여러 개의 div를 동일한 높이로 유지하려면 어떻게해야합니까?
문제
다른 양의 텍스트 내용을 가진 몇 가지 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의 높이가 다시 변경 될 필요가 없으면 잘 작동합니다.
그러나 브라우저 창을 크기를 조정하면 실패합니다.
내가 (a) 브라우저를 더 넓게 만들면 (b) 내 div가 더 넓어지면 (c) 텍스트 내용이 더 적은 시간을 감싸고 (d) 내 div가 너무 키가 큽니다.
내가 (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에서 설정 되었기 때문에 원래 기능으로 설정할 필요가 없었습니다.