Question

我想将div的高度推到等于其他div。在我的情况下，我有2个div：div one和div 2。我需要将div 2的高度推到div 1。无论div二上的内容，高度都等于div一。如果div上的内容比div上的内容长，则会溢出div二。如下所述：

是否可以使用jquery，CSS或它们的组合？我在这里尝试一些其他问题的答案，但大多数不同的情况。这里大多数问题是关于2 div之间相等，不等于一个div。

感谢您提供任何帮助。

Answer 1

只有css

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
.mydiv
{
	width: 200px;
	height: 300px;
	overflow: scroll;
	border:2px solid black;
	text-align: center;
	position: absolute;
}

#one{
	left: 10px;

}

#two{
	left:220px;
}

</style>

<body>


<div class="mydiv" id="one">kjfkdfjdkfjkfjdkfjk  jfkdjfdkfj kdfj kjfkfj kdjfkdfjdkfjdkfjdkfjdkfjkdfjdkfjdkfja ldjfdk jdkf jdkfjdk jfkdjfdk jkdjfkdjfkdjfkdjfkdfjdkfj kdjkdjfkdjfkdfjdkfjdkfjdkfjdkfjkdfjk
</div>
<div class="mydiv" id="two">
kdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfj
</div>


<script type="text/javascript">





</script>
</body>

</html>

或使用jquery

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>

.mydiv{
	overflow: scroll;
	border:2px solid black;
	text-align: center;
	position: absolute;
}

#one{
	width: 200px;
	height: 300px;
}

#two{
	left:220px;
}

</style>

<body>


<div class="mydiv" id="one">kjfkdfjdkfjkfjdkfjk  jfkdjfdkfj kdfj kjfkfj kdjfkdfjdkfjdkfjdkfjdkfjkdfjdkfjdkfja ldjfdk jdkf jdkfjdk jfkdjfdk jkdjfkdjfkdjfkdjfkdfjdkfj kdjkdjfkdjfkdfjdkfjdkfjdkfjdkfjkdfjk
</div>
<div class="mydiv" id="two">
kdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfj
</div>


<script type="text/javascript">

var div_one_width = $("#one").width(); //get the first div width
var div_one_height = $("#one").height(); // get the second div height.
$("#two").css({"width":div_one_width+'px',"height":div_one_height+'px'})



</script>
</body>

</html>

Answer 2

尝试，

 window.onload=function()
 {
          $(div2 selector).css("height",$(div1 selector).css("height"));
  }

Answer 3

使用纯Javascript，您可以在DIV＃1上使用http://devmount.github.io/GermanWordEmbeddings/方法获取其实际高度值。然后将它应用于DIV＃2 CSS样式：

{{1}}

Answer 4

找到你的div应该是div的id，并设置div的高度。

例如，class div1是较小尺寸的div。 class div2是div，你需要将其大小改为div1的大小：

$('.div2').attr('height',$('.div1').attr('height'));

如何使div与一个div具有相同的高度

4 个答案: