我正在使用一个有两行的网格，第一行通过sticky-top固定在屏幕顶部，第二行使用min-vh-100，这样它就能填满屏幕上的剩余高度。内容将被动态添加到第二行的innerHTML中，我想让用户始终看到第一行，因为溢出的内容是由滚动条自动处理的。
第一个问题是，它在文档加载就绪时创建了一个滚动条，你可以向下滚动，这样第二行的一些内容（我认为这是由stick-top高度决定的）被 "隐藏 "在第一行后面。我想这是因为sticky-top的原因，但不知道如何解决。只有在添加内容时，第二行有溢出时才应该做滚动条。我不应该向下滚动，这样第一行后面的内容就会丢失。
第二个问题是，我想让滚动条在第二行添加内容时自动滚动。我试着使用body的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的例子中，我不应该让 "你好 "被隐藏起来。
我想保留行和列的使用，因为它是一个更大的网格的一部分，我正在使用一个有两行的网格，第一行通过sticky-top固定在屏幕顶部，第二行使用min-vh-100，这样它就能填满屏幕上的剩余高度。
我会使用的解决方案（如果我的理解是正确的）是添加
min-height: calc(100vh - 78px); // Change the px to whatever the sticky-top is
你可以覆盖默认的bootstrap css为。
codepen.ioRishab2019penrNOGBEz https：/codepen.ioRishab2019penrNOGBEz。
.bg-light{
position:relative!important;
}