스크립트를 통해 같은 높이로

Question

적어도 9 개의 좋은 브라우저를 지원하는 순수 CSS와 동일한 높이를 사용하는 것은 쉽지 않습니다. 그래서 js를 대신 사용하기로 결정했습니다. 사용자 측에서 js가 활성화되어 있지 않은 경우 높이가 같지 않으면 문제가 발생하지 않습니다.

그러나이 "동일한 높이"상황에 대한 매우 구체적인 요청이 있습니다. 다른 SO 사용자의 도움으로, 플렉스를 사용

, 우리는 할 수 있습니다 :

http://jsfiddle.net/4an5r1b3/1/

HTML

<div class="container"> 
    <div class="col left"> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <div class="bottom-yeah"> 
      <p>lorem ipsium</p> 
      <p>lorem ipsium</p> 
      <p>lorem ipsium</p> 
     </div> 

    </div> 
    <div class="col right"> 
     <p>lorem ipsium</p>  
     <p>lorem ipsium</p>  
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
    </div> 
</div> 

CSS : .container { 표시 : 플렉스; 우리는 오래된 브라우저뿐만 아니라 작동 할 수 있도록 jQuery를 사용하여 같은 일, 을 달성 할 수있는 경우 }

.col { 
    float: left; 
    width: 30%; 
    color: #fff; 
} 

.col.left { 
    display: flex; 
    flex-direction: column; 
    background-color: transparent; 
    color: red; 
} 

.col.right { 
    background-color: blue; 
} 

.bottom-yeah { 
    flex-grow: 1; 
    margin-top: 50px; 
    background-color: yellow; 
} 

궁금하네요?

우리가 바퀴를 다시 발명하지 않도록하기 위해 알려진 스크립트입니다. 당신은 단지 텍스트 데이터가있는 경우

Answer 1

var leftHeight = $('.col.left').height(); 
var rightHeight = $('.col.right').height(); 

if (leftHeight > rightHeight) 
{ 
    $('.col.right').height(leftHeight); 
} else { 
    $('.col.left').height(rightHeight); 
} 

사이트가 응답하는 경우,이 함수에 넣고 수