Mailmulah Mailmulah - 2 months ago 10
jQuery Question

How to make a div to have same height to one div

I want to push height of a div to equal to other div.
In my case, I have 2 div: div one and div two. I need to push height of div two to equal div one. No matter content on div two, the height will equal to div one. If content on div two longer than content on div one, it will overflow the div two. Like the described bellow:

enter image description here

Is it possible to use jquery, CSS or combine of them?
I am trying some answer from other question here, but most different case. Most of question here about equal between 2 div, not equal to one div.

Thank you for any kind of help.

Answer

with only 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>

or using 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>