Question

我希望info_content的高度覆盖下面的休息屏幕，我尝试了一些jQuery。我只是一个初学者，所以我无法正确地做到这一点。非常感谢您帮助解决此问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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库并进行了修改。

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

Answer 4

使用此jquery。

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

如何使用jQuery设置两个div的相同高度

4 个答案: