Как установить одну и ту же высоту двух разделов с помощью jQuery

Question

Я хочу, чтобы высота info_content для покрытия экрана ниже, я пробовал несколько jQuery. Я просто новичок, поэтому я не могу сделать это правильно. Буду признателен за вашу помощь в решении этой проблемы.

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

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

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%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 1

Вы можете использовать height(), чтобы установить высоту элемента набора.

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

Answer 2

Используйте innerHeight, чтобы получить высоту окна и вычесть его с высоты .video_content

Проверьте скрипку

https://jsfiddle.net/pranesh_ravi/szgavxw3/2/

Answer 3

Используйте этот JQuery.

var divHeight = $('.video_content').height(); 
var windowHeight=$(window).height(); 
var infoHeight=(windowHeight-divHeight); 
$('.info_content').css('height', infoHeight+'px'); 

Answer 4

Посмотрите на это изменение с вашей стороны. Добавлена ​​библиотека jQuery и внесены изменения.

$(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(); 
 
});

img { 
 
    width: 100%; 
 
} 
 
.content { 
 
    width: 100%; 
 
    background: #fff; 
 
    position: fixed; 
 
    top: 80px; 
 
    bottom: 0px; 
 
} 
 
.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 { 
 
    overflow-y: auto; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.content .inner_content .left_content .info_content { 
 
    background: #333; 
 
    display: inline-block; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    color: #fff; 
 
    font-family: 'arial'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="inner_content"> 
 
    <div class="left_content"> 
 
     <div class="video_content"> 
 
     <img src="https://mediaarchive.cern.ch/MediaArchive/Video/Public/Movies/CERN/2016/CERN-MOVIE-2016-041/CERN-MOVIE-2016-041-002/CERN-MOVIE-2016-041-002-posterframe-640x360-at-55-percent.jpg"> 
 
     </div> 
 
     <div class="info_content"> 
 
     these height should be till bottom 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>