jQuery container Div height нераспространяющийся

Question

Я использовал код jQuery, чтобы развернуть высоту Divs внутри контейнера. Here is the JSFiddle link.

Однако при изменении размера браузера высота Divs фиксирована и текст переполняет контейнер. Можно ли изменить следующий код, чтобы расширить высоту контейнера и Divs внутри него, чтобы текст оставался внутри? Код

---

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

Вы устанавливаете фиксированную высоту при изменении размера в первый раз, поэтому вам нужно установить высоту auto, а затем изменить размер 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'); 
});