다른 div에 높이 추가

Question

div 헤더에 클릭 할 때마다 50px를 추가하고 헤더가 더 크면 div main에 헤더 높이가 같게하려고합니다.

나는 왜 작동하지 않는지 모르겠다.

나는이 스크립트

$(function() { 
    var alturaHeader = $('header').height(); 
    var alturaMain = $('.main').height(); 

    $('button').click(function(){ 
     $('header').height(function(index, height){ 
      return (height + 50); 
     }); 

     console.log(alturaHeader); 

     if (alturaMain < alturaHeader) { 
      alert("test"); 
      $('.main').css({'min-height': alturaHeader }); 
     } 
    }); 
}); 

어떤 제안이?

JS 피들 : http://jsfiddle.net/JWf7u/ 감사합니다.

Answer 1

여기있다 fiddle code 변경 될 때마다 div의 높이를 업데이트해야합니다.

var alturaHeader = $('header').height(); 
    var alturaMain = $('.main').height(); 

    $('button').click(function(){ 
     $('header').height(function(index, height){ 
      return (height + 50); 
     }); 

     alturaHeader = $('header').height() 
     if (alturaMain < alturaHeader) { 
      $('.main').css({'min-height': alturaHeader }); 
     } 
    }); 

Answer 2

왜 u는 CSS 속성 높이 사용 해달라고 : 주 (자식)의 div 100 %을 ..

검사를 아래

$(function() { 
    var alturaHeader = $('.header').height(); 
    var alturaMain = $('.main').height(); 

    $('button').click(function(){ 
     $('.header').height(function(index, height){ 
      return (height + 50); 
     }); 
     // below is not required we are using css to handle this 
     /* 
     console.log(alturaHeader); 

     if (alturaMain < alturaHeader) { 
      alert("test"); 
      $('.main').css({'min-height': alturaHeader }); 
     } 
     */ 
    }); 
}); 

--CSS--

.header 
{ 
    border:1px solid black; 
} 
.main 
{ 
    border:1px solid red; 
    height:100%; 
} 

heigth : 100 % wh 유 .. 같은 높이가 지금 그들이 그나마 있도록 아래의 바이올린 http://jsfiddle.net/7fkp9/

우리가 경계를 가지고있는 기억을 확인하려는에서 매우 동일한 높이 2 픽셀 ...에 의해 경계 속성을 사용 해달라고하거나 설정합니다 테두리 크기를 0 픽셀로 변경