jQuery容器Div高度不擴展

Question

我已經使用jQuery代碼來擴展容器內Div的高度。 Here is the JSFiddle link。

但是，當調整瀏覽器寬度的大小時，Divs高度是固定的，並且文本溢出容器。下面的代碼可以改變，以擴大容器的高度和Div內的文字，使文本保持在？

---

jQuery代碼：

$(window).load(function() { 
$(window).resize(function() { 

    $(document).ready(function() { 
     var heightArray = $(".container>div").map(function() { 
      return $(this).height(); 
     }).get(); 
     var maxHeight = Math.max.apply(Math, heightArray); 
     $(".container>div").height(maxHeight); 
     $(".container>div").height(maxHeight); 
    }); 

}).trigger('resize'); 
}); 

風格：

.container { 
height: auto; 
float:left; } 

#half { 
width:48%; 
margin:0.5%; 
padding:0.5%; 
float:left; 
background-color:#1589FF; } 

HTML：

<div class="container"> 
<div id="half"> 
    <h1>About</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div> 

<div id="half"> 
    <h1>News</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. 
</div> 
</div> 

Answer 1

第一次調整大小時，您正在設置固定高度，因此您必須設置高度自動然後調整div的大小，以便他們知道所需的大小應該是多少。否則，你得到的最大高度是你第一次設定的固定高度。

function resizeDivs() { 
    var heightArray = $(".container>div").map(function() { 
     return $(this).height(); 
    }).get(); 
    var maxHeight = Math.max.apply(Math, heightArray); 
    $(".container>div").height(maxHeight); 
    $(".container>div").height(maxHeight); 
} 

$(function() { 
    resizeDivs(); 
}); 

$(window).resize(function() { 
    $(".container>div").css('height', 'auto'); 
    resizeDivs(); 
}); 

的jsfiddle

http://jsfiddle.net/XXxNe/11/

Answer 2

可以easyly做到通過加1行代碼，檢查此fiddle。

我加入的時候調整大小功能被稱爲該行右：

$(".container>div").height(""); 

將高度設置爲自動和演算將重置權heigth。

Answer 3

您需要使用的offsetHeight，而不是高度來看看這個jsfiddle

$(window).load(function() { 
    $(window).resize(function() { 

     $(document).ready(function() { 
      var heightArray = $(".container>div").map(function() { 
       return $(this).offsetHeight ; //height(); 
      }).get(); 
      console.log(heightArray); 
      var maxHeight = Math.max.apply(Math, heightArray); 
      console.log(maxHeight); 
      $(".container>div").height(maxHeight); 
//   $(".container>div").height(maxHeight); 
     }); 

    }).trigger('resize'); 
});