jQuery高度（）不會改變調整大小

我從來沒有遇到過這個問題，但我似乎無法找到解決方案，所以我希望你們能幫助我。jQuery高度（）不會改變調整大小

jQuery的

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 
     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
});

Basicly什麼這個函數是檢查最高DIV並設置所有選定的div的高度，這個高度。這工作正常。但它是一個快速響應的設計，所以當用戶調整他的瀏覽器時，內容會變得更小，div更高。所以我添加了一個resize事件。該事件正在被解僱，但並未改變身高。任何想法都是爲什麼調整大小不會改變高度？

快速的jsfiddle顯示會發生什麼：http://jsfiddle.net/3mVkn/

FIX

嗯，這是真的是傻瓜。因爲我設置的高度（）已經固定，所以我只需重新設置高度就可以了。

更新代碼：

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 

     //Reset height 
     $('#main.level1 .block.attention .block-content').height('auto'); 

     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
});

來源

2012-07-19 Sjors

這不是jQuery相關，但CSS。這是因爲，一旦將.block-content的高度設置爲某個值，在調整窗口大小後，這些.block-content的高度將不會更改，因爲高度不再設置爲auto，而是設置爲某個預定義的值。

解決方法是使用return $(this)[0].scrollHeight而不是return $(this).height() 這樣它將返回內容的真實高度，而不是CSS定義的高度。

編輯：

的解決方案實際上是計算.block內容內的所有兒童的高度，然後返回該值。我在這裏編輯了你的代碼http://jsfiddle.net/3mVkn/12/

這應該會給你需要的結果。

來源

2012-07-19 11:50:01

嗨丹尼斯，感謝您的回覆。不幸的是，這似乎沒有解決問題:( – Sjors 2012-07-19 12:15:22

是的，你是對的。請檢查編輯，我現在提供了正確的解決方案。 – 2012-07-19 18:50:47

我認爲你缺少.map()功能的一個參數。我看了.map()here。

來源

2012-07-19 11:49:26

jQuery高度（）不會改變調整大小

回答

相關問題