0

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

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

3 回答 3

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/

于 2013-05-13T20:29:44.187 回答
1

你需要使用 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');
});
于 2013-05-13T20:40:10.487 回答
0

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

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

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

它将高度设置为自动，计算将重置正确的高度。

于 2013-05-13T20:31:15.750 回答