# 純粋なCSSソリューションでスティッキーフッターを一番下に
**URL:** https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509
**Category:** UX
**Tags:** css
**Created:** [2021 年 2 月 20 日午後 1:01 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509 "2021-02-20T13:01:08Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021 年 2 月 20 日午後 1:01 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/1 "2021-02-20T13:01:08Z")
Discourse の皆様、こんにちは。
私は、JavaScript を使わないフッター固定ソリューションを共有します（このリクエストに対する代替案：[https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214](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
```
これで完了です 🙂。これで、コンテンツが少ないページでもフッターがページの下部に固定されます。
コンテンツが少ないページでのフッターの表示例は以下の通りです：
そうでなければ、フッターは画面の中央に配置されてしまいます：
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021 年 2 月 21 日午前 2:14 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/2 "2021-02-21T02:14:54Z")
なぜ標準の Discourse フッターテーマコンポーネントの代わりにこれを使うのですか？
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021 年 2 月 21 日午前 9:49 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/3 "2021-02-21T09:49:24Z")
ジェフ、あなたはどう思いますか？追加のHTMLやCSSコードごとにコンポーネントをインストールする必要がありますか？
これは「フッターの作り方」に関するチュートリアルではなく、独自にフッターを作成したい人のために、ページ下部にフッターを固定するための簡単な代替案を紹介するものです。
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021 年 2 月 21 日午後 10:50 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/4 "2021-02-21T22:50:50Z")
ええと、私の考えでは、可能な限りテーマコンポーネントを利用してほしいですね。これらは当社の「公式」コンポーネントなので、完全なサポートを受けられたり、自動更新されたりするからです。@awesomerobot、@Johani、@jordan.vidrine の皆さんはどうお考えですか？
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021 年 2 月 22 日午後 11:20 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/7 "2021-02-22T23:20:58Z")
はい、公式のフッターコンポーネントが要件を満たすなら、私たち側で常に最新の状態に保ってくれるので便利です。しかし、異なるレイアウトを望む人もいます。
以前、OP と似たようなことをやったことがあります。`#main-outlet` の高さを、ビューポートの高さ（100vh）からフッターとヘッダーの高さを引いた値に設定します。これにより、短いページでもフッターが常に画面の一番下に表示されるようになります。
```scss
#main-outlet {
box-sizing: border-box; // 高さ計算にパディングを含める
}
```
```xml
```
この問題はよく見られるため、`footer.html` または 2 つのフッタープラグイン outlets のどちらかにコンテンツがある場合、コア機能として自動的にこのような処理を行う価値があるかもしれません。
---
### Author:  [@spectre](https://meta.discourse.org/u/spectre)
#### Post date: [2022 年 9 月 30 日午後 12:26 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/8 "2022-09-30T12:26:55Z")
> [@cosdesign](#):
>
> **ステップ 1:** これを共通の CSS タブに貼り付けます
@cosdesign 、その CSS タブはどこにあるか教えていただけますか？ 🙂
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2022 年 9 月 30 日午後 1:09 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/9 "2022-09-30T13:09:50Z")
デフォルトのテーマは、CSS/HTMLの編集ボタンから見つけることができます。
ただし、テーマコンポーネントとして作成する方が良いでしょう。（インストールボタンをクリックし、そこから「新規作成」を選択してください）
詳細については、[Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648) を参照してください 👍
---
### Author:  [@spectre](https://meta.discourse.org/u/spectre)
#### Post date: [2022 年 10 月 2 日午後 9:38 UTC](https://meta.discourse.org/t/sticky-footer-to-the-bottom-pure-css-solution/180509/10 "2022-10-02T21:38:55Z")
> [@JammyDodger](#):
>
> デフォルトテーマは、CSS/HTMLの編集ボタンから見つけることができます。
素晴らしいです 🙂