如何使div与最小的div具有相同的高度？

Question

所以我在视频播放器旁边有一个列表，如

所示

我希望菜单可滚动，并且只有视频播放器那么大。问题是视频播放器是响应式的，因此高度可能会根据屏幕的宽度而变化。

HTML代码看起来有点像这样：

<div class="row justify-content-center" id="chat">
    <div class="col-9">
        <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto">
        </video>
    </div>
    <div class="col-3">
          <ul class="nav nav-pills flex-column list-scroll">
            <li class="nav-item">
              <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li><li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
</div>

Answer 1

您可以在可滚动元素上使用position: absolute将其从页面流中删除，然后使用overflow-y: scroll

.chat > .col-3 > .nav {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: scroll;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center chat" id="chat">
    <div class="col-9">
      <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto">
        </video>
    </div>
    <div class="col-3">
      <ul class="nav nav-pills flex-column list-scroll">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>