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

あなたは、ページの流れからそれを削除し、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>

を使用するようにスクロール可能な要素に position: absoluteを使用することができます