Bootstrap 4滚动条溢出与粘顶答案

【问题标题】：Bootstrap 4 scrollbar overflow with sticky-topBootstrap 4滚动条溢出与粘顶
【发布时间】：2020-05-01 02:15:20
【问题描述】：

我正在使用一个有两行的网格，第一行通过sticky-top 固定在屏幕顶部，第二行通过 min-vh-100 固定，这样它就可以填充屏幕上的剩余高度。内容将动态添加到第二行的 innerHTML，我希望用户始终可以看到第一行，因为溢出由滚动条自动处理。

第一个问题是它会在文档加载/就绪时创建一个滚动条，您可以向下滚动，以便第二行中的某些内容（我认为由顶部高度决定）“隐藏”在后面第一行。我认为这是因为粘顶，但不知道如何修复它。仅当添加内容时第二行出现溢出时才应制作滚动条。我应该无法向下滚动，以免内容丢失在第一行后面。

第二个问题是我希望滚动条在内容添加到第二行时自动滚动。我试着玩弄身体的 scrollTop 和 scrollHeight 但无法让它工作。在 Codepen 示例中，我应该无法向下滚动以隐藏“Hello”。

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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">

  <style>
    label:hover {
      background: LightGray;
      cursor: pointer;
    }
  </style>
</head>

<body class="bg-light">
  <div class="container-fluid">
    <form name="form" enctype="multipart/x-www-form-urlencoded" action="/execute" method="post">
      <div class="row">
        <div class="col">
          <div class="row pt-2 pb-4 align-items-center justify-content-center bg-light sticky-top">

            <button class="submitbutton btn btn-info" type="submit" name="Help" value="Help">Help</button>

            <div class="ml-4 mr-4">
              <input class="form-control mt-2" type="text" name="Textbox">
            </div>

            <button class="submitbutton btn btn-success mr-4" type="submit" name="Go" value="Go">Go</button>
            <button id="cancel" type="button" class="btn btn-dark">Cancel</button>

          </div>

          <div class="row bg-dark">
            <code class="pl-4 text-white min-vh-100">Hello</code>
          </div>

        </div>
      </div>
    </form>
  </div>
</body>
</html>

Codepen

我想继续使用行和列，因为它是更大网格的一部分。

【问题讨论】：

标签： html jquery css bootstrap-4

【解决方案1】：

我会使用的解决方案（如果我正确地关注你的话）是添加

    min-height: calc(100vh - 78px); // Change the px to whatever the sticky-top is

Codepen

【讨论】：

【解决方案2】：

您可以将默认引导 css 覆盖为：

codepen：https://codepen.io/Rishab2019/pen/rNOGBEz

.bg-light{

  position:relative!important;
}

【讨论】：