Bootstrap 4 Sticky Footer Not Sticking

Не совсем уверен, почему липкий нижний колонтитул не работает в Bootstrap 4. У меня есть сайт TYPO3, на котором я начинаю.

Липкий нижний колонтитул не прилипает к нижней части страницы.

Вот копия источника страницы, как она была визуализирована.

Я в основном скопировал html файл из папки bootstraps docs, а затем модифицировал его и скопировал в свой шаблон TYPO3.

Если я заполняю страницу содержимым, нижний колонтитул не встает - мне нужно прокрутить страницу вниз, чтобы увидеть ее.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">

<link rel="stylesheet" type="text/css"
	href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
	media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
	media="all">

<script
	src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
	type="text/javascript"></script>

</head>
<body>
	<div class="container">
		<div class="mt-1">
			<h1>Sticky footer</h1>
		</div>
		<p class="lead">Pin a fixed-height footer to the bottom of the
			viewport in desktop browsers with this custom HTML and CSS.</p>
		<p>
			Use <a href="../sticky-footer-navbar">the sticky footer with a
				fixed navbar</a> if need be, too.
		</p>
		<div class="row">
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
		</div>
	</div>

	<footer class="footer">
		<div class="container">
			<span class="text-muted">Place sticky footer content here.</span>
		</div>
	</footer>
</body>
</html>

Ответ 1

Удалось понять это. Возможно, у меня есть недоразумение о том, что такое "Sticky" или что-то в этом роде, но решение заключалось в том, чтобы изменить абсолютный → исправленный в файле css.

например, из:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

чтобы:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Ответ 2

Пример в документах Bootstrap 4 имеет следующий CSS:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Вероятно, вы забыли установить html { position: relative; min-height: 100%; } html { position: relative; min-height: 100%; } html { position: relative; min-height: 100%; } - Я знаю, что обычно забываю эту часть.

Ответ 3

Обновление 2018 - Bootstrap 4.0.0

Теперь, когда Bootstrap 4.0 является flexbox, проще использовать flexbox для липкого нижнего колонтитула.

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Демо: Bootstrap 4 Sticky Footer (4.0.0)

Примечание. Класс утилиты flex-fill будет включен в следующий выпуск Bootstrap 4.1. Поэтому после этого выпуска дополнительный CSS для flex-fill не понадобится.