Javascript jQuery 将一个 div 的高度设置为另一个的“动态高度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32109683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery set height of a div to the 'dynamic height' of another
提问by Alex Zahir
I have two divs.
我有两个div。
<div class="col-1"><p>Content</p></div>
<div class="col-2"><img src="" alt="" /></div>
With their respected content inside each one.
每个里面都有他们受人尊敬的内容。
I am trying to set the height of col-2 to be exactly as that of col-1.
我试图将 col-2 的高度设置为与 col-1 的高度完全相同。
I tried this using jQuery:
我用jQuery试过这个：
$(document).ready(function() {
var divHeight = $('.col1').height();
$('.col2').css('min-height', divHeight+'px');
});
The problem is that col-1 does not have a height set on it. It has a dynamic height which grows when its content grows. Therefore the above code does not work for it.
问题是 col-1 没有设置高度。它有一个动态高度，随着其内容的增长而增长。因此上面的代码不适用于它。
Is there any way I can set the min height of col-2 to be equal to the dynamic height of col 1 using jQuery?
有什么方法可以使用jQuery将col-2的最小高度设置为等于col 1的动态高度吗？
回答by Luthando Ntsekwa
this works fine for me, its just that your class names are wrong, the class-names should be .col-1and .col-2:
这工作对我很好，它只是你的类名是错误的，类名称应该是.col-1和.col-2：
$(document).ready(function() {
var divHeight = $('.col-1').height();
$('.col-2').css('min-height', divHeight+'px');
});
Here is the Fiddle
这是小提琴
EDIT- Based on comments:
You can do all this without using jquery
编辑-基于评论：
您可以在不使用 jquery 的情况下完成所有这些
Flexbox (not supported in IE 8 & 9)- if you apply the flex to the parent div, it will make all its children heights equal:
.row{ display: flex;}table- you can give your div's the table layout
.row {display: table; } .row div { display: table-cell;}
Flexbox （IE 8 和 9 不支持）- 如果您将 flex 应用到父 div，它将使其所有子项的高度相等：
.row{ display: flex;}table- 你可以给你的 div 的表格布局
.row {display: table; } .row div { display: table-cell;}
回答by Mehrdad Pedramfar
First of all you need to fix the class names that missed '-' in your jQuery code.
首先，您需要修复 jQuery 代码中缺少“-”的类名。
If you want to get the .col-1 height you can do it in several ways, that I will discuss later.
如果你想获得 .col-1 的高度，你可以通过多种方式来实现，我将在后面讨论。
Before that in each case you need to write a function that gives .col-1 height and set .col-2 .
在此之前，在每种情况下，您都需要编写一个函数，该函数给出 .col-1 高度并设置 .col-2 。
$(document).ready(function() {
function set_heights(){
var divHeight = $('.col-1').height();
$('.col-2').css('min-height', divHeight+'px');
}
});
Then you just call the function whenever you need...
然后您只需在需要时调用该函数...
Some of different ways are :
一些不同的方式是：
to set interval or timer to call above function once in a period of time you need.
setInterval(function(){ set_heights(); }, 100);use resize event for .col-1 . to call above function when ever .col-1 changed.
$('.col-1').resize(function(){ set_heights(); });use bind
设置间隔或计时器以在您需要的时间段内调用上述函数一次。
setInterval(function(){ set_heights(); }, 100);对 .col-1 使用调整大小事件。当 .col-1 改变时调用上面的函数。
$('.col-1').resize(function(){ set_heights(); });使用绑定
remember!!! for responsive design you need too call above function even when window resized !
记住！！！对于响应式设计，即使窗口调整大小，您也需要调用上述函数！
Good luck !
祝你好运 ！
回答by atinder
$('.col-2').css({'minHeight': divHeight+'px'});
you can place this in a callback. so it is executed when height is changed. like this Detecting when a div's height changes using jQuery
你可以把它放在回调中。所以在改变高度时执行。像这样使用 jQuery 检测 div 的高度何时发生变化
回答by Eric So
Add a resize event listener, when col-2resize, trigger a function to resize col-2
添加resize事件监听器，当col-2resize时，触发一个函数resize col-2
$(document).ready(function() {
$('.tb-col1').resize(function(){
var divHeight = $('.col-2').height();
$('.col-2').css('minHeight', divHeight+'px');
}
});
