Bootstrap 4滚动条溢出与粘顶

Question

I'm using a grid with two rows with the first being fixed to the top of the screen via sticky-top and the second with min-vh-100 so that it fills the remaining height on the screen.我正在使用具有两行的网格，第一行通过粘顶固定到屏幕顶部，第二行使用 min-vh-100 以填充屏幕上的剩余高度。 Content will be dynamically added to the innerHTML of the second row and I want the user to always have the first row visible as the overflow is handled automatically by a scrollbar.内容将动态添加到第二行的 innerHTML 中，我希望用户始终使第一行可见，因为溢出由滚动条自动处理。

The first issue is that it creates a scrollbar on document load/ready and you can scroll down so that some of the content (which I think is determined by the stick-top height) in the second row is "hidden" behind the first row.第一个问题是它在文档加载/准备就绪时创建了一个滚动条，您可以向下滚动，以便第二行中的某些内容（我认为由顶部高度决定）“隐藏”在第一行后面. I think this is because of the sticky-top but not sure how to fix it.我认为这是因为粘顶，但不知道如何修复它。 A scrollbar should only be made if there is overflow in the second row when content is added.仅当添加内容时第二行出现溢出时才应制作滚动条。 I should not be able to scroll down so that content is lost behind the first row.我应该无法向下滚动，以免内容丢失在第一行后面。

The second issue is that I want the scrollbar to automatically scroll as content is added to the second row.第二个问题是我希望滚动条在内容添加到第二行时自动滚动。 I tried playing around with the body's scrollTop and scrollHeight but couldn't get it working.我试着玩弄身体的 scrollTop 和 scrollHeight 但无法让它工作。 In the Codepen example, I should not be able to scroll down so that "Hello" is hidden.在 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密码笔

I would like to keep the use of the rows and columns because it's part of a larger grid.我想继续使用行和列，因为它是更大网格的一部分。

Answer 1

The solution I would use (if I'm following you properly) is adding我会使用的解决方案（如果我正确地关注你的话）正在添加

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

Codepen密码笔

Answer 2

You can override the default bootstrap css as:您可以将默认引导程序 css 覆盖为：

codepen: https://codepen.io/Rishab2019/pen/rNOGBEz代码笔： https://codepen.io/Rishab2019/pen/rNOGBEz

.bg-light{

  position:relative!important;
}

Bootstrap 4滚动条溢出与粘顶

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-30 16:44:50

解决方案2
0 2020-04-30 16:50:08

Bootstrap 4滚动条溢出与粘顶

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-30 16:44:50

解决方案2 0 2020-04-30 16:50:08

解决方案1
1 已采纳 2020-04-30 16:44:50

解决方案2
0 2020-04-30 16:50:08