粘性页脚到底部，纯CSS解决方案

用户体验
1

Hello Discourse enthusiasts,

I want to share with you my sticky footer solution, no js required (an alternative to this request), and assuming you know the height of your footer…I gave mine an extra 100px just to have some space between the content and footer.
In case you have a bigger footer with multiple columns, you should give a different fixed height in your mobile tab.

Step 1: Paste this inside your common CSS tab

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* is equal to the footer height - change it as you need, in both common and your mobile tab*/
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* optional */
  color: var(--primary-medium); /* optional */
  text-align: center; /* optional */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

Step 2: Go to your </body> tab and paste your footer HTML inside

Example:

<div id="sticky-footer">
  <div class="wrap">
      <!-- your footer content here -->
  </div>
</div>

That’s it :slightly_smiling_face:. Now your footer will stick to the bottom of your page even on pages with short content.

This is how our footer looks like on a page with short content:

image
image1150×1082 28.9 KB

Otherwise, it would be placed in the middle of the screen like so:

image
image1316×1222 33.5 KB

3 个赞
2

Why use this instead of the standard Discourse footer theme component?

1 个赞
3

You tell me Jeff :slight_smile: …do we need to install components for every extra HTML and CSS code?
This is not a “how to create a footer” tutorial but more like a quick alternative solution to make a footer stick to the bottom of the page for those who may want to create their own footer.

4

Hmm, my thinking is we want people to use the theme components whenever possible as they are “official” from us and thus get full support, get auto updated, etc. What do @awesomerobot @Johani and @jordan.vidrine think?

2 个赞
7

Yeah if the official footer component fits your needs then it’s nice because we keep it up-to-date for you, but some people will want a different layout.

I’ve done something like this in the past… it’s a similar process to OP. You set the #main-outlet height to be 100% of the viewport height (100vh) minus the height of the footer and header. So on short pages your footer will now sit right at the bottom.

#main-outlet {
  box-sizing: border-box; // includes padding in height calculation
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  My footer content
</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>

Screen Shot 2021-02-22 at 6.19.39 PM
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

It comes up often enough that it’s probably worth doing something like this in core automatically if there’s content in footer.html or either of the two footer plugin outlets.

4 个赞
8

@cosdesign，请问您介意告诉我那个 CSS 选项卡在哪里吗？ :slight_smile:

9

对于您的默认主题，您可以通过单击“编辑 CSS/HTML”按钮找到它：

Untitled
Untitled1482×751 43.1 KB

不过，最好将其创建为主题组件。（单击安装按钮，然后从那里选择“创建新组件”）

您可以在 Developing Discourse Themes & Theme Components 找到更多信息 :+1:

2 个赞
10

太棒了 :slight_smile:

1 个赞