純粋なCSSソリューションでスティッキーフッターを一番下に

貢献 UX
1

Discourse の皆様、こんにちは。

私は、JavaScript を使わないフッター固定ソリューションを共有します（このリクエストに対する代替案：https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214）。フッターの高さが既知であることを前提としています。私はコンテンツとフッターの間に少し余裕を持たせるため、自分のフッターには 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: \u003c/body\u003e タブに移動し、フッターの HTML を以下の例のように貼り付けてください。

例：

\u003cdiv id="sticky-footer"\u003e
  \u003cdiv class="wrap"\u003e
      \u003c!-- ここにフッターの内容を記述 --\u003e
  \u003c/div\u003e
\u003c/div\u003e

これで完了です :slightly_smiling_face:。これで、コンテンツが少ないページでもフッターがページの下部に固定されます。

コンテンツが少ないページでのフッターの表示例は以下の通りです：

image
image1150×1082 28.9 KB

そうでなければ、フッターは画面の中央に配置されてしまいます：

image
image1316×1222 33.5 KB

「いいね！」 3
2

なぜ標準の Discourse フッターテーマコンポーネントの代わりにこれを使うのですか？

「いいね！」 1
3

ジェフ、あなたはどう思いますか？追加のHTMLやCSSコードごとにコンポーネントをインストールする必要がありますか？
これは「フッターの作り方」に関するチュートリアルではなく、独自にフッターを作成したい人のために、ページ下部にフッターを固定するための簡単な代替案を紹介するものです。

4

ええと、私の考えでは、可能な限りテーマコンポーネントを利用してほしいですね。これらは当社の「公式」コンポーネントなので、完全なサポートを受けられたり、自動更新されたりするからです。@awesomerobot、@Johani、@jordan.vidrine の皆さんはどうお考えですか？

「いいね！」 2
7

はい、公式のフッターコンポーネントが要件を満たすなら、私たち側で常に最新の状態に保ってくれるので便利です。しかし、異なるレイアウトを望む人もいます。

以前、OP と似たようなことをやったことがあります。#main-outlet の高さを、ビューポートの高さ（100vh）からフッターとヘッダーの高さを引いた値に設定します。これにより、短いページでもフッターが常に画面の一番下に表示されるようになります。

#main-outlet {
  box-sizing: border-box; // 高さ計算にパディングを含める
}

<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

この問題はよく見られるため、footer.html または 2 つのフッタープラグイン 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