LINUX.ORG.RU

Сообщения Unwhale

 

Bootstrap. <footer> не получается закрепить внизу

Форум — Web-development

Суть проблемы

У меня есть 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>

 , ,

Unwhale
()

RSS подписка на новые темы