基于jQuery实现左右div自适应高度完全相同的代码

实现左右div自适应高度完全相同是前端开发中常见的需求，通过jQuery可以轻松实现该功能。下面是具体的实现攻略。

步骤一：设定HTML结构

首先，需要在HTML页面中设定两个div容器，分别设置 ID 属性值为 left 和right，并设置宽度为 50%。左右两个容器之间是并列关系。

<div id="left" style="width: 50%; float: left; background-color: #F6DADA;">
    <p>左侧容器</p>
</div>
<div id="right" style="width:50%; float:right; background-color:#D4E6F1;">
    <p>右侧容器</p>
</div>

步骤二：使用jQuery获取两个容器的高度

在jQuery中提供了height()方法获取元素的高度，通过该方法，可以获取左右两个div容器的高度值。具体如下所示：

var leftHeight = $("#left").height();
var rightHeight = $("#right").height();

步骤三：对高度值进行比较，并重新设置高度

接下来，利用获取到的leftHeight和rightHeight高度值进行比较，如果两个值不一致，则将较小的值设置为较大的值，使得两个容器的高度完全相同。

if (leftHeight > rightHeight) {
    $("#right").height(leftHeight);
} else {
    $("#left").height(rightHeight);
}

示例1

HTML结构：

<div id="left" style="width: 50%; float: left; background-color: #F6DADA;">
    <p>这是左侧容器</p>
    <p>左侧容器高度稍微比右侧高</p>
    <p>测试背景色调整以后显示的情况</p>
</div>
<div id="right" style="width:50%; float:right; background-color:#D4E6F1;">
    <p>这是右侧容器</p>
</div>

jQuery代码：

var leftHeight = $("#left").height();
var rightHeight = $("#right").height();

if (leftHeight > rightHeight) {
    $("#right").height(leftHeight);
} else {
    $("#left").height(rightHeight);
}

效果演示：

左侧容器高度稍微比右侧高，但通过jQuery实现自适应后两个容器的高度完全一致。

示例2

HTML结构：

<div id="left" style="width: 50%; float: left; background-color: #F6DADA;">
    <p>这是左侧容器</p>
</div>
<div id="right" style="width:50%; float:right; background-color:#D4E6F1;">
    <p>这是右侧容器</p>
    <p>右侧容器高度比左侧高</p>
    <p>测试背景色调整以后显示的情况</p>
    <p>测试浮动和边距的影响情况</p>
</div>

jQuery代码：

var leftHeight = $("#left").height();
var rightHeight = $("#right").height();

if (leftHeight > rightHeight) {
    $("#right").height(leftHeight);
} else {
    $("#left").height(rightHeight);
}

效果演示：

右侧容器高度较高，通过jQuery实现自适应后两个容器的高度完全一致。同时，通过此示例还可以看到浮动和边距对高度的影响。