Wie die gleiche Höhe von zwei Divs mit jQuery

Question

Ich möchte die Höhe von info_content, um den unteren Rest Bildschirm abdecken, habe ich einige jQuery versucht. Ich bin nur ein Anfänger, also kann ich es nicht richtig machen. Ich würde Ihre Hilfe zur Lösung dieses Problems zu schätzen wissen.

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

können Sie noch height() verwenden, um die Höhe eines angepassten Elements einzustellen.

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

Answer 2

Verwenden innerHeight die Höhe des Fensters zu erhalten und es mit der Höhe von .video_content

prüfen

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

Answer 3

verwenden jquery Geige subtrahieren.

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

Answer 4

Werfen Sie einen Blick auf diese Bearbeitung von Ihrer Seite. Die jQuery-Bibliothek hinzugefügt und Änderungen vorgenommen.

$(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>