如何在 Bootstrap v4 中使一个 div 可滚动？答案

【问题标题】：How to make one div scrollable in Bootstrap v4?如何在 Bootstrap v4 中使一个 div 可滚动？
【发布时间】：2020-01-05 15:04:00
【问题描述】：

我正在使用 Bootstrap 4.1（最新）。我需要让一个 div 可滚动，我一直在搞乱代码，比如将 overflow-auto 和 position-absolute 设置为所有不同的 div 标签，但我无法得到预期结果。有人可以查看我的代码并告诉我我的代码有什么问题吗？

这里是 JSFiddle 链接：https://jsfiddle.net/matbcvo/qsecw5bx/

这是 HTML 代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="/video-js/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Gaki no Tsukai Live Stream</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Watch
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item</a>
          <a class="dropdown-item" href="#">item2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">
      <input class="form-control mr-sm-2" type="text" placeholder="Password" aria-label="Password">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Log in</button>
    </form>
  </div>
</nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-9" style="background-color: lightblue;">

                <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  controls preload="auto" data-setup='{ "autoplay": true, "preload": "auto", "fluid": true }'>
                    <source type="application/x-mpegURL" src="/hls/test.m3u8" />    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                </video>
                <script src="video-js/video.js"></script>

            </div>

            <div class="col-3" style="background-color: lightgray;">

                <div class="row">
                    <div class="col-12 position-absolute">
                        <!-- "chat-box" -->
                        <div class="overflow-auto" style="background-color: lightyellow;">
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                        </div>
                        <!-- "chat-input" -->
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">@</div>
                            </div>
                            <input class="form-control" type="text">
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class="container-fluid" style="background-color: lightgreen;">
        <div class="row">
            <div class="col-12">
                <p>some content here</p>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

如您所见，一个 div（如“聊天框”）中有溢出的内容，这个 div 应该是可滚动的。我已将 overflow-auto 设置为此 div 并将 position-absolute 设置为此 div 的父 div。有“聊天输入”应该在“聊天框”div下（不在可滚动的div中）。

第二列的高度必须与第一列的高度相同（目前它可以正常工作）。

预期结果：

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

为了使div 可滚动，您必须为该div 设置固定height 或max-height。

在您的情况下，您将拥有一个具有特定高度的视频播放器，因此请将聊天框高度与视频播放器高度匹配。

例子：

/*DEMO*/
body{padding:1rem}
#chatbox{width:50%;border:1px solid red}

/*MAKE CHATBOX SCROLLABLE*/
#chatbox{height:300px;}

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

<div id="chatbox" class="overflow-auto">
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
</div>

旁注 - 您应该减少代码并只显示重现问题的重要内容。

【讨论】：

我想避免为视频播放器或聊天框设置固定高度，因为第二列高度取决于第一列高度。当您将 webbrowser 窗口的大小调整为较小时，视频播放器会自动缩小。所以这是不可能的......