ページまたはコンテンツの下部のフッター、どちらか低い方

92

私は次の構造を持っています：

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

<article>JavaScriptを使用してコンテンツを動的にロードします。このため、<article>ブロックの高さが変わる可能性があります。

欲しい <footer>のブロックは、コンテンツがたくさんあるページの下部にある、またはブラウザウィンドウの下部にコンテンツが存在する場合にのみ数行します。

現時点ではどちらか一方しかできませんが、両方はできません。

だから誰も私がこれを行う方法を知っていますか- <footer>どちらが低いかに応じて、ページ/コンテンツの下部または画面の下部に固執するようにします。

css  html  footer 
— 意志
ソース
なぜ2年前の質問に反対票を投じたのか、人々はコメントしたいと思いますか？
— 2014
...それはほぼ6年ぶりだ、さあ
— ウィル

回答:

99

Ryan Faitのスティッキーフッターはとてもいいですが、基本的な構造が欠けていると思います*。

フレックスボックスのバージョン

幸運なことに、古いブラウザをサポートしなくてもフレックスボックスを使用できる場合は、スティッキフッターが簡単になり、動的にサイズ変更されるフッターをサポートします。

フレックスボックスを使用してフッターを下部に固定するコツは、同じコンテナ内の他の要素を垂直方向にフレックスすることです。必要なのは、フルサイズのラッパー要素display: flexと、次のflex値よりも大きい値を持つ少なくとも1つの兄弟です0。

CSS： 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

コードスニペットを表示

flexboxを使用できない場合、選択する基本構造は次のとおりです。

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

これはそれほど遠くないわけではありません。

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

フッターを貼り付けるコツは、フッターをその含まれている要素の下のパディングに固定することです。これには、フッターの高さが静的である必要がありますが、フッターは通常、静的な高さであることがわかりました。

HTML： 
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
CSS： 
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

コードスニペットを表示

フッターがに固定されているため#main-wrapper、#main-wrapper子が長くない限り、少なくともページの高さである必要があります。これは、することによって行われ#main-wrapperていmin-heightのを100%。また、その親ということを覚えている、htmlとbody、ページと同じ高さである必要があることおく必要があります。

CSS： 
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

コードスニペットを表示

もちろん、コンテンツがない場合でも、このコードはフッターがページの下部から落ちるのを強制するため、私の判断に疑問を投げかける必要があります。最後のトリックはで使用されるボックスモデルに変更することである#main-wrapperようにmin-heightするには100%含まれて100pxパディングを。

CSS： 
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

コードスニペットを表示

これで、元のHTML構造を持つスティッキーフッターができました。ちょうどことを確認するfooterのがheightに等しい#main-wrappers 'はpadding-bottom、あなたが設定する必要があります。

* Faitの構造に欠陥があるのは、不要な要素を追加しながら.footerと.header要素を異なる階層レベルに設定するため.pushです。

— zzzzBov
ソース
私はを追加する必要がありました#main-wrapper *:first-child { margin-top: 0; }。そうしないと、最初の子の上余白によってページが長すぎます（短いページで不要なスクロールバーが発生します）。
— フロリアン
@zzzzBov、この徹底的な説明、特にflex-directionについて言及していただきありがとうございます（これをもっと早く見つけたいと思っています-数時間節約できたでしょう！:)
— ea0723
FlexboxバージョンはIE11では機能しませんが、他の方法で問題ありません。ありがとう、+ 1！
— マット
@Matt、フレックスボックスをIE11で機能させるには、ブラウザのプレフィックスを使用する必要があります。autoprefixerなどのツールを使用すれば、手動で追加することを心配する必要はありません。
— zzzzBov 2016年
2
彼のサイトがIn Memoriamの通知に変換されているため、スティッキーフッターリンクは壊れているようです。さらに、robots.txtの設定により、キャッシュされたバージョンはありません
— tzrlk
13

Ryan Faitのスティッキーフッターは、過去に何度か使用したシンプルなソリューションです。

基本的なHTML：

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

これを翻訳して、すでに次のような結果が得られているものに似ています。

HTML：

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

ラッパーマージンのネガを更新してフッターの高さに合わせ、divをプッシュすることを忘れないでください。幸運を！

— ジョシュ・メイン
ソース
4
私は彼がフッターソリューションに適切なコメントを下部に置いた方法を愛しています：D
— Madara's Ghost
この特定のスタイルのマークアップを変更する必要はありません。
— zzzzBov 2012
@zzzzBov現時点ではこれを詳しく調べる時間はあまりありませんが、正確にはどういう意味ですか？
— Josh Mein、2012
私は自分のモバイルATMを使用しているので、完全な回答を書くことはできません。コメントが多かったので、後で回答を追加することを忘れないでください。
— zzzzBov 2012
@JoshMein、提供された構造をいじらずにフッターを固定する方法を説明する回答を追加しました。
— zzzzBov 2012
0

追加のマークアップを追加せずにこの問題を解決しようとしていたため、最終的に次のソリューションを使用しました。 

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>
スニペットを展開

記事の最小高さを設定するには、ヘッダー、ナビゲーション、フッターの高さを知っている必要があります。これにより、記事のコンテンツが数行しかない場合、フッターはブラウザウィンドウの下部に固定され、そうでない場合はすべてのコンテンツの下に表示されます。

これと上記で投稿された他の解決策は、https：//css-tricks.com/couple-takes-sticky-footer/にあります。

— ガリーナE
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.