各位 Discourse 爱好者，大家好，
我想与大家分享我的粘性页脚解决方案，无需 JavaScript（作为对此请求的替代方案），前提是您需要知道页脚的高度。我为我的页脚额外预留了 100px，以便在内容和页脚之间留出一些空间。
如果您有一个包含多列的较大页脚，则应在您的移动选项卡中设置不同的固定高度。
步骤 1： 将此代码粘贴到您的通用 CSS 选项卡中
body {
position: relative;
}
#main {
margin-bottom: 350px; /* 等于页脚高度 - 请根据您的需要在通用选项卡和移动选项卡中修改此值 */
}
#sticky-footer {
padding: 50px 0;
background: var(--header_background); /* 可选 */
color: var(--primary-medium); /* 可选 */
text-align: center; /* 可选 */
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
步骤 2： 进入您的 </body> 选项卡，并将您的页脚 HTML 粘贴进去
示例：
<div id="sticky-footer">
<div class="wrap">
<!-- 在此处放置您的页脚内容 -->
</div>
</div>
就这样了 
。现在，即使是在内容较短的页面上，您的页脚也会固定在页面底部。
这是我们的页脚在内容较短的页面上的显示效果：
否则，它将会像这样放置在屏幕中间：
3 个赞
为什么要使用这个，而不是标准的 Discourse 页脚主题组件？
1 个赞
你告诉我，Jeff 
.. 我们是否需要为每一段额外的 HTML 和 CSS 代码安装组件？
这并非“如何创建页脚”的教程，而是为那些希望自定义页脚的用户提供一种快速替代方案，使页脚始终固定在页面底部。
嗯，我们的想法是尽可能让人们使用主题组件，因为它们是我们“官方”提供的，因此能获得全面支持、自动更新等。@awesomerobot @Johani 和 @jordan.vidrine 怎么看？
2 个赞
是的，如果官方页脚组件能满足你的需求，那当然很好，因为我们会帮你保持更新；但有些人可能想要不同的布局。
我之前做过类似的事情……流程与 OP 所述类似。你只需将 #main-outlet 的高度设置为视口高度（100vh）减去页脚和页眉的高度。这样，在较短的页面上，页脚就会自动固定在底部。
#main-outlet {
box-sizing: border-box; // 将内边距包含在高度计算中
}
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
我的页脚内容
</script>
<script type="text/discourse-plugin" version="0.8">
api.decoratePluginOutlet(
"below-footer",
(elem, args) => {
let headerHeight = document.querySelector(".d-header").offsetHeight;
let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
let mainOffset = headerHeight + footerHeight;
document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
}
);
</script>
这种情况出现得相当频繁，因此如果 footer.html 或两个页脚插件插槽中任一包含内容，核心功能中自动实现类似处理可能是值得的。
4 个赞
spectre
(Spectre Zone)
8
@cosdesign，请问您介意告诉我那个 CSS 选项卡在哪里吗？
对于您的默认主题，您可以通过单击“编辑 CSS/HTML”按钮找到它：
不过，最好将其创建为主题组件。（单击安装按钮，然后从那里选择“创建新组件”）
您可以在 Developing Discourse Themes & Theme Components 找到更多信息 
2 个赞
