將高度添加到另一個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時更新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

爲什麼不ü使用CSS屬性高度：100％主（子）DIV ..

檢查以下

$(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像素。對於完全相同的高度不使用border屬性或設置邊界大小爲零（0）像素