Javascript jQuery容器Div高度未扩展

我使用jQuery代码来扩展容器中div的高度

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

<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>

风格：

$(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; }

<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>

HTML:

$(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; }

<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>

关于
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。临时牧师。乌拉姆·科珀（Etiam ullamcorper lorem dapibus velit Succipit ultrices）。在最新的医疗设备中使用Proin。
新闻
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。

您在第一次调整大小时设置了一个固定的高度，因此必须设置“高度自动”，然后调整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();
});

JSFIDLE

---

只需添加一行代码即可轻松完成，请选中此项

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

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

---

它会将高度设置为“自动”，calcul会重置正确的高度。

您需要使用“远视”而不是“高度”来查看此信息

---

$（document）.ready（函数（）{

应该包装所有其他函数…同时您正在加载

文档.ready

多个times@jcho360您不应包装

$（窗口）.load

在

文档中。ready

。应完全删除ready处理程序。对于高度的初始配置，您可以使用min height而不是height，并设置overflow:auto，以便在设置min-height后，如果有什么东西阻止长方体增长，则根据需要强制长方体增长。使用Firebug并检查JS Error是否与解决方案一致n、 虽然关于丢失css规则的第一部分并不准确。该规则适用于未被更改的容器。子div是。