Question

不确定为什么粘性页脚在Bootstrap 4中不起作用。我有一个TYPO3网站，我是初学者。

粘性页脚没有粘在页面底部。

以下是已呈现的页面源的副本。

我基本上从bootstraps docs文件夹中复制了html文件，然后将其修改并复制到我的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>

Answer 1

管理解决问题。也许我对“粘性”或其他什么有误解，但解决方案是改变绝对 - ＆gt;修复了css文件。

e.g。从：

.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;
}

Answer 2

更新2018 - Bootstrap 4.0.0

现在Bootstrap 4.0是flexbox，它更容易将flexbox用于粘性页脚。

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

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

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

演示：Bootstrap 4 Sticky Footer（4.0.0）

注意： flex-fill实用程序类将included in the next Bootstrap 4.1发布。因此，在该版本发布之后，不需要额外的用于flex-fill的CSS。

另见：Bootstrap 4 - Sticky footer - Dynamic footer height

Answer 3

Bootstrap 4 docs中的示例包含以下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%; } - 我知道我通常会忘记那部分。

Answer 4

在Bootstrap 4中，使用fixed-bottom类粘贴页脚。无需自定义CSS：

<footer class="footer fixed-bottom">
    ...
</footer>

Answer 5

<html class="h-100">
.
.
</html>

这应该可以解决问题。它类似于Benjineer's的答案，但已准备好引导程序类。已通过Bootstrap 4.3.1进行测试

Answer 6

如果您使用

<footer class="footer fixed-bottom">
    ...
</footer>

记住要添加

html {
    padding-bottom: greater than your footer;
}

到CSS 以避免在页面底部屏蔽某些内容

Bootstrap 4粘性页脚不粘

6 个答案: