I have two divs.
<div class="col-1"><p>Content</p></div>
<div class="col-2"><img src="" alt="" /></div>
With their respected content inside each one.
I am trying to set the height of col-2 to be exactly as that of col-1.
I tried this using jQuery:
$(document).ready(function() {
var divHeight = $('.col1').height();
$('.col2').css('min-height', divHeight+'px');
});
The problem is that col-1 does not have a height set on it. It has a dynamic height which grows when its content grows. Therefore the above code does not work for it.
Is there any way I can set the min height of col-2 to be equal to the dynamic height of col 1 using jQuery?
this works fine for me, its just that your class names are wrong, the class-names should be .col-1
and .col-2
:
$(document).ready(function() {
var divHeight = $('.col-1').height();
$('.col-2').css('min-height', divHeight+'px');
});
Here is the Fiddle
EDIT- Based on comments:
You can do all this without using jquery
Flexbox (not supported in IE 8 & 9) - if you apply the flex to the parent div, it will make all its children heights equal:
.row{ display: flex;}
table - you can give your div's the table layout
.row {display: table; } .row div { display: table-cell;}
First of all you need to fix the class names that missed '-' in your jQuery code.
If you want to get the .col-1 height you can do it in several ways, that I will discuss later.
Before that in each case you need to write a function that gives .col-1 height and set .col-2 .
$(document).ready(function() {
function set_heights(){
var divHeight = $('.col-1').height();
$('.col-2').css('min-height', divHeight+'px');
}
});
Then you just call the function whenever you need...
Some of different ways are :
to set interval or timer to call above function once in a period of time you need.
setInterval(function(){ set_heights(); }, 100);
use resize event for .col-1 . to call above function when ever .col-1 changed.
$('.col-1').resize(function(){ set_heights(); });
use bind
remember!!! for responsive design you need too call above function even when window resized !
Good luck !
$('.col-2').css({'minHeight': divHeight+'px'});
you can place this in a callback. so it is executed when height is changed. like this Detecting when a div's height changes using jQuery
Add a resize event listener, when col-2 resize, trigger a function to resize col-2
$(document).ready(function() {
$('.tb-col1').resize(function(){
var divHeight = $('.col-2').height();
$('.col-2').css('minHeight', divHeight+'px');
}
});
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.