Я пытаюсь расположить карту по центру между строкой поиска и нижней частью окна просмотра.
Я пытался сделать рост 100%, но затем он простирается за пределыобласть просмотра и пользователь может прокрутить вниз в пустое пространство.Я пытался использовать align-content: center; в родительском контейнере, но это ничего не меняет.
html.html
<body>
<div class="navbar navbar-expand-lg sticky-top">
<!-- nav info -->
</div>
<div class="container-fluid">
<!-- Title above search bar -->
<div class="row">
<div id="search-title" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<h3>Title</h3>
</div>
</div>
<!-- Search bar -->
<div class="row">
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<!-- search form -->
</form>
</div>
</div>
<!-- No results -->
<div class="row">
<div id="no-results" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
{% if term != '' and not cameras %}
<!-- if no results then tell user -->
{% endif %}
</div>
</div>
<!-- Resulting card from search -->
{% if camera %}
<div class="container align-center">
<!-- I would like this card to be vertically centered between the search bar and the bottom of viewport -->
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto card myclass">
<div class="card-body">
<!-- info -->
</div>
</div>
</div>
{% endif %}
</div>
</body>
css
html, body {
height: 100%;
width: 100%;
}
.align-center {
align-content: center;
}
Вот как это выглядит прямо сейчас.Обратите внимание, как граница на теле находится ниже области просмотра.
