Я использую сетку из двух рядов, первый из которых прикреплен к верхней части экрана с помощью липкой верхней части, а второй с помощью min-vh-100, чтобы он заполнил оставшуюся высоту на экране. Содержимое будет динамически добавляться во внутреннюю HTML второй строки, и я хочу, чтобы пользователь всегда имел первую видимую строку, поскольку переполнение автоматически обрабатывается полосой прокрутки.
Первая проблема заключается в том, что она создает полоса прокрутки при загрузке / готовности документа, и вы можете прокрутить вниз, чтобы часть содержимого (которое, я думаю, определяется высотой флешки) во втором ряду «скрыто» за первым рядом. Я думаю, что это из-за липкой верхней части, но не уверен, как это исправить. Полоса прокрутки должна создаваться только в том случае, если при добавлении контента во второй строке есть переполнение. Я не должен иметь возможность прокручивать страницу вниз, чтобы контент терялся за первой строкой.
Вторая проблема заключается в том, что я хочу, чтобы полоса прокрутки автоматически прокручивалась при добавлении контента во вторую строку. Я попытался поиграться с 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
Я хотел бы сохранить использование строк и столбцов, потому что это часть большей сетки.