Question

:)我有一点问题：

我有一个div，在里面，我有两个div，一个在另一个旁边。左边的一个在调整大小时改变其高度以保持与宽度的关系，并且我希望右边的一个具有与左边相同的高度;我在文档末尾的jQuery中有这段代码：

<script>
     $("#right").css("height",$("#left").height());
</script>

左边有一些内容（给它的高度）需要一些时间来加载，所以，使用这段代码，当我加载页面时，右边的一个有0px的高度，我认为那个＆＃39 ; s因为左边的代码在代码运行时没有加载其内容。那么，我该怎么做才能确保在左边的代码加载内容时运行代码？而且，每当左侧高度发生变化时，如何刷新代码？

虽然该代码不起作用，但是我用该代码创建了一个函数（称为均衡），然后我用onclick =＆＃34; equalize（）＆＃34;创建了一个按钮，当我按下时按钮，右边的高度得到左边的高度。 .-。

Answer 1

试试这个：

<script>
  $(document).ready(function(){
     $("#right").css("height",$("#left").height()+"px");
  });

</script>

Answer 2

使用jQuery的on方法并等待load事件触发：

$(window).on('load', function(){
    $("#right").css("height", $("#left").height().toString() + "px");
});

load事件在其资源子集（例如图像）全部被加载时触发。通过将其附加到窗口，这将等待所有在执行函数之前加载页面资源。

Answer 3

根据您分享的相关信息，如果您只是希望两个<div>在调整窗口大小时具有相同的高度，则无需使用jQuery - 只需为两个div指定相等的高度，以％为单位父高。

<div id='container'>
    <div id='left'></div>
    <div id='right'></div>
</div>

CSS

*{
 margin:0;
 padding:0;
}
html, body{
 height:100%;
}
#container{
 height:100%;
}
#container div{
 display:inline-block;
}
#left{
 height:100%;
 width:200px;;
 background:dodgerblue;
}
#right{
 height:100%;
 width:50%;
 background:orange;
}

像这样JSFiddle

我错过了什么吗？是否有理由使用jQuery？请在下面评论..

Answer 4

我建议您使用这些功能来均衡两个或更多div：

var maxHeight = 0;

$(".test").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".test").height(maxHeight);

Answer 5

好的，谢谢大家的答案，但如果有人在这方面遇到了解决方法：

#left的高度与宽度的50％有关系。所以，因为宽度加载整个文档，我把这个js（用jQuery ...）：

$("#right").css("height",$("#left").width()/2);

而且......就是这样:)）

感谢T J（谁让我意识到）和所有回答的人：D

平等的高度

5 个答案: