moidul dargahi moidul dargahi - 2 months ago 6
Javascript Question

How to set same height of two divs using jQuery

I want the height of

info_content
to cover the below rest screen, I tried some jQuery. I am just a beginner so I am unable to do it properly. I would appreciate your help to resolve this problem.

Please see Fiddle

HTML



<div class="content">
<div class="inner_content">
<div class="left_content">
<div class="video_content">
Some videos comes here
</div>
<div class="info_content">
Some info text comes here
</div>
</div>
</div>
</div>


CSS



content {
width: 100%;
background: #fff;
position: fixed;
top: 80px;
bottom: 40px;
}
.content .inner_content {
position: relative;
width: 100%;
height: 100%;
}
.content .inner_content .left_content {
position: absolute;
background: #eee;
left: 0;
width: 40%;
height: 100%;
padding: 15px;
}
.content .inner_content .left_content .video_content {
height: 50%;
overflow-y: auto;
display: inline-block;
width:100%;
}
.content .inner_content .left_content .info_content {
background: gray;
display: inline-block;
height: 50%;
overflow-y: auto;
width:100%;
}


Javascript



var divHeight = $('.video_content').height();

$('.info_content').css('min-height', divHeight+'px');

Answer

Have a look at this edit from your side. Added the jQuery library and did modifications.

https://jsfiddle.net/40ywsw5u/4/

$(document).ready(function(){
function calcHeights(){
   var divHeight = $('.video_content').innerHeight(); 
   var totalHeight = $('.left_content').innerHeight(); 
   var infoHeight = totalHeight - divHeight - 20;
   $('.info_content').css('min-height', infoHeight+'px');
};
// The height of.info_content should be 100% to window
$(window).on('resize', function(){
   calcHeights();
});
calcHeights();
});