Question

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

我尝试了以下内容：

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

由于.SLDR-ONE没有定义的高度，因此无法正常工作。 .prev取高度，除非我将高度定义为.SLDR-ONE（例如：300px）。

.SLDR-ONE有css：float:left; position:relative，因此高度是自动定义的。

Answer 1

尝试使用innerHeight，获取.prev。

的高度

Answer 2

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

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

Answer 3

您可以使用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>

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

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

3 个答案: