Bootstrap 4粘页脚不粘答案

【问题标题】：Bootstrap 4 Sticky Footer Not StickingBootstrap 4粘页脚不粘
【发布时间】：2018-03-25 03:56:03
【问题描述】：

不太清楚为什么粘性页脚在 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>

【问题讨论】：

请检查您的 CSS 文件路径...
@sajee 文件路径正确。我已经通过查看源代码进行了验证->然后单击每个以查看它是否加载了文本并且它们确实加载了。
当我检查您提供的 conde sn-p 时，没有任何样式应用于 HTML 内容。

标签： html css typo3 bootstrap-4 sticky-footer

【解决方案1】：

2020 年更新 - Bootstrap 4.5+

既然 Bootstrap 4 是 flexbox，使用 flexbox 来制作粘性页脚会更容易。

<div class="d-flex flex-column min-vh-100">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)

注意：flex-fill 实用程序是 included in Bootstrap 4.1 at later 版本。所以在那之后发布额外的用于 flex-fill 的 CSS 就不再需要了。此外，min-vh-100 包含在较新的 Bootstrap 4 版本中。

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

【讨论】：

这是这些答案中唯一正确的sticky footer（当内容小于一页时固定在底部，否则将内容向下推直到用户滚动到底部）；其他是固定底部的页脚（在内容上始终可见，在滚动期间固定在浏览器底部）
你可以使用min-vh-100类代替sticky-footer-wrapper
谢谢，这个问题的最佳答案：但是粘页脚包装类真的需要吗？ flex-fill 已经填满了将页脚推到底部的空间。
非常感谢，您的回答为我节省了很多工作。只需稍加调整，它就会像魔术一样发挥作用。
似乎是使用纯引导的唯一答案

【解决方案2】：

设法弄明白了。也许我对“粘滞”是什么或什么有误解，但解决方案是更改绝对 -> 在 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;
}

【讨论】：

Yes 在 Bootstrap 4.1.3 中使用滚动内容时可以正常工作
感谢@Daryn 智能解决方案！
这不是一个粘性页脚（当内容小于一页时固定到底部，否则向下推过去的内容直到用户滚动到底部);这是一个固定底部的页脚（在内容上始终可见，在滚动期间固定在浏览器底部）

【解决方案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%; } - 我知道我通常会忘记那部分。

【讨论】：

这应该是正确的答案，因为它解决了未提及 html CSS 要求的 Bootstrap 4.0 问题。
查看这里的解释 :) freecodecamp.org/news/…
这不是一个好的解决方案，因为为了让它工作，你必须覆盖 body margin: 0;设置在重启。 getbootstrap.com/docs/4.0/content/reboot

【解决方案4】：

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

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

【讨论】：

这不好，如果页面足够短，“fixed-bottom”页脚将覆盖所有其他元素...
这对我来说效果很好。为了解决@GianlucaGhettini 提出的问题，我只是在
中添加了背景，在中添加了 padding-bottom（与使用固定导航栏时需要在上设置 padding-top 相同）。
这不是一个粘性页脚（当内容小于一页时固定到底部，否则向下推过去的内容直到用户滚动到底部);这是一个固定底部的页脚（在内容上始终可见，在滚动期间固定在浏览器底部）

【解决方案5】：

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

这应该可以解决问题。它类似于Benjineer's 答案，但准备好了引导类。使用 Bootstrap 4.3.1 测试

【讨论】：

我觉得body标签也需要class="h-100"
如果您仔细查看example，这是源代码，我只是设法错过了它。谢谢。

【解决方案6】：

如果你使用

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

记得添加

html {
    padding-bottom: >= footer height;
}

到 CSS 避免阻止页面底部的某些内容

【讨论】：

老实说，这是最简单也是唯一对我有用的答案。有没有一种方法可以自动计算页脚的 padding-bottom 值？
@Kaszanas 那是相当不错的工作。可以参考这个解决方案stackoverflow.com/a/44156191/11230343