html - Bootstrap 4 - 2列相同高度，其中一个带有滚动条

Question

我一直在寻找解决这个问题的方法。我正在尝试创建一个页面，左侧是视频播放器，右侧是聊天。对于视频播放器，我使用的是 embed-responsive 类，因此视频播放器会根据 View 调整大小。我遇到的问题是右侧的聊天框。我无法让溢出滚动。它只是展开并向下推右边的 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>