Bootstrap 4-2列相同高度的一个滚动

Question

我一直在寻找解决此问题的方法。我正在尝试创建一个页面，其中视频播放器在左侧，聊天在右侧。对于视频播放器，我使用的是embed-responsive类，因此视频播放器会根据视图调整大小。我遇到的问题是右侧的聊天框。我无法滚动溢出。它只是扩大并向下推右div，而不再是左div的高度

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

 <div  class="container-fluid p-0 mb-3">
    <div class="row">
      <div class="col-md-8 p-0">
        <div class="embed-responsive embed-responsive-16by9">
          <video controls>
            <source src="#" type="video/mp4" />
            Your browser does not support HTML5 video.
          </video>
        </div>
      </div>
      <div class="col-md-4 p-0">
        <div class="bg-dark text-white h-100" style="overflow: scroll">
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
        </div>
      </div>
    </div>
  </div>

Answer 1

解决您问题的一种方法是，将overflow-auto类添加到col-4来包装聊天，并使用JQuery将此包装的高度设置为等于视频的高度加载文档时。同样，您还必须在$(window).resize()上设置一个侦听器，以便在窗口大小更改时再次计算height。

工作示例：

请注意，我已将类更改为col-8和col-4，以便您可以看到它全屏显示。

$(document).ready(function()
{
    $("#chatWrapper").height($("#myVideo").height());
    
    $(window).resize(function()
    {
        $("#chatWrapper").height($("#myVideo").height());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-8">
    <div id="myVideo" class="embed-responsive embed-responsive-16by9">
      <video controls>
        <source src="#" type="video/mp4"/>
        Your browser does not support HTML5 video.
      </video>
    </div>
  </div>
  
  <div id="chatWrapper" class="col-4 overflow-auto">
    <div class="bg-dark text-white">
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
  </div>

</div>
</div>