Суть проблемы
У меня есть html код страницы где я использую одну из последних версий Bootstrap (5.1). Я пытаюсь закрепить footer так, чтобы он был в самом низу страницы. При этом если веб-страница занимает меньше места, чем размер окна браузера, то footer должен быть внизу окна.
Этот пример есть здесь: https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/
Использовал все те же классы и добавил стиль для .container, но footer по-прежнему просто приклеивается к низу содержимого из <main>...</main>.
Если прописываю <footer class="...fixed-bottom..."> то он закрепляется именно внизу окна браузера, игнорируя содержимое страницы, таким образом перекрывая его, а мне это не надо.
Что я делаю не так?
Код
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="description" content="meta-description">
<title>Main page</title>
<style>
main > .container {
padding: 60px 15px 0;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<div class="container">
<h1>Sample text</h1>
<div class="container">
<div class="row row-cols-2 row-cols-md-3 g-4">
<div class="col">
<div class="card " style="background-color: #ceece5!important;">
<img class="card-img-top" src="/public/img/image.jpeg" alt="image">
<div class="card-body">
<h5 class="card-title"><u>Chapter name</u></h5>
<p class="card-text" style="hyphens:auto!important;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed facilisis libero. Sed accumsan at leo at feugiat. Sed commodo luctus mi nec malesuada. Duis semper ipsum et ultrices euismod.
</p>
<a href="/s/chapter1" class="stretched-link"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted"> Sample footer text </span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
