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

您需要使用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行代码轻松完成，请检查fiddle。

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

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

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

jQuery容器Div高度不扩展

3 个答案: