Set a DIV height equal with of another DIV height

Question

I have two DIVs, .prev and .SLDR-ONE and I want to set .prev to keep the same height with .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 has css : float:left; position:relative, so the height is defined automaticaly.

@plonkminbuzz I tried and I don't know why but my height is not really equal. there is 20-30px of difference... — Mathieu
– Mathieu, Commented Feb 9, 2017 at 8:44

Álvaro Touzón · Accepted Answer · 2017-02-08 19:20:27Z

2

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

answered Feb 8, 2017 at 19:20

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

azs06 · Accepted Answer · 2017-02-08 21:25:28Z

You could do this using 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.

Jatin Asija · Accepted Answer · 2017-02-08 19:33:29Z

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

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.

Collectives™ on Stack Overflow

Set a DIV height equal with of another DIV height

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related