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 float:left; position:relative , so the height is defined automaticaly.
3 answers
solution1
2 ACCPTED 2017-02-08 19:20:27
尝试使用innerHeight来获取.prev的高度。
solution2
0 2017-02-08 19:33:29
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.
solution3
0 2017-02-08 21:25:28
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.