设置DIV高度等于另一个DIV高度

I have two DIVs, .prev and .SLDR-ONE and I want to set .prev to keep the same height with .SLDR-ONE.

我有两个DIV,.prev和.SLDR-ONE,我想设置.prev与.SLDR-ONE保持相同的高度。

I've tried the following:

我尝试过以下方法:

$(".prev").css({'height':($(".SLDR-ONE").height()+'px')});

It is not working properly because .SLDR-ONE doesn't have defined height. .prev take the height of the page except if I define a height to .SLDR-ONE (ex:300px).

它无法正常工作,因为.SLDR-ONE没有定义高度。 .prev取高度,除非我将高度定义为.SLDR-ONE(例如:300px)。

.SLDR-ONE has css : float:left; position:relative, so the height is defined automaticaly.

.SLDR-ONE有css:float:left; position:relative,所以自动定义高度。

3 个解决方案

#1

Try to use innerHeight, to obtain the height of .prev.

尝试使用innerHeight,以获得.prev的高度。

#2

As from .height() method of jQuery returns width of the element excluding padding ,margin and bottom.So if you want same height for both of the div

从.height()方法的jQuery返回元素的宽度,不包括填充,边距和底部。所以如果你想要两个div相同的高度

You should be using outerHeight(). And there are possibility that you have assigned the same class to some other element and the method may be returning value of width and height of that element.

你应该使用outerHeight()。并且您可能已将相同的类分配给其他元素,并且该方法可能返回该元素的宽度和高度值。

#3

You could do this using offsetHeight

你可以使用offsetHeight来做到这一点

(function(){
var one = document.querySelector('.one');
var two = document.querySelector('.two')
two.style.height = one.offsetHeight + 'px';	
}())

.one{
	float: left;
	position: relative;
}
.two{
	background: #ccc;
	clear: both;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="one">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing </p>
</div>
<div class="two">
	
</div>	
</body>
</html>

If you prefer jQuery then you could use innerHeight. innerHeight documentation.

如果您更喜欢jQuery,那么您可以使用innerHeight。 innerHeight文档。

#1