창의 높이가 다른 div에 따라 달라지는 높이 조정

Question

두 개의 50 % 너비 div가 서로 옆에 있습니다. 둘 중 하나에 텍스트가 더 많고 div가 길어지고 다른 하나는 더 길게 만듭니다. 텍스트가 적지 만 다른 div의 높이를 높이는 javascript가 있습니다. 창문을 작은 창 (크기 태블릿)으로 크기를 조정할 때도 div의 높이가 모두 같지만 그대로 유지해도 효과적입니다. 그러나 문제는 창을 정상 크기로 다시 바꿀 때입니다. div 높이는 크기가 변경된 후에 발생하는 것과 같은 높이를 유지하지만 창 크기가 변경되기 전의 상태로 다시 변경되지 않습니다.

이

창 크기 조절에 높이를 변경하는 JS이다

$(document).ready(function() { 
function block() { 
var leftHeight = $('.leftblock').height(); 
var rightHeight = $('.rightblock').height(); 
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); } 
else{ $('.leftblock').css('height', rightHeight); } 
} 
$(block); 
$(window).resize(block); 
}); 

예 : 어윈 반 Ekeren 작성자
http://jsfiddle.net/hg0L01ex/

Answer 1

:
제 (최상) 내 문제에 대한 해결책은 JS없이 CSS 테이블 셀과 함께 작동합니다. : http://jsfiddle.net/2uogqxyt

---

CSS가 아닌 CSS에는 JavaScript를 사용하지 마십시오. 모델 또는 표 셀 FlexBox;

여기가 테이블 셀입니다 :

여기

.blocks { display:table-row;} 
.leftblock   { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#e14f47; } 
.rightblock   { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#cd2c24; } 

Demonstration with table-cell

.blocks { display:flex; width:100%; align-items:stretch;} 
.leftblock   { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#e14f47; } 
.rightblock   { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#cd2c24; } 

Demonstration with flexbox