jQuery容器Div高度不扩展

Question

我使用jQuery代码来扩展容器内Div的高度。 这是JSFiddle链接 。

但是，在调整浏览器宽度时，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

您在第一次调整大小时设置固定高度，因此您必须设置高度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

你需要使用offsetHeight而不是height来看看这个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');
});

Answer 3

可以通过添加1行代码轻松完成，检查这个小提琴 。

我在调用resize函数时添加了该行：

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

它将高度设置为auto，calcul将重置右侧高度。