【翻訳】フッターを貼り付ける5つの方法 | CSS-Tricks_html/css

【翻訳】フッターを貼り付ける5つの方法 | CSS-Tricks_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:15

オリジナル

1411 人が閲覧しました

原文: http://www.zcfy.cc/article/491

そう言うなら、簡単な歴史。

フッターを貼り付ける目的は、ブラウザーウィンドウの下部でフッターを「サポート」することです。ただし、常に下部にあるわけではありません。ページを拡張するのに十分なコンテンツがある場合は、フッターをページの下部に押し込むことができます。ただし、ページのコンテンツが短い場合でも、ブラウザウィンドウの下部にスティッキーフッターが表示されます。

ラッパーで負の margin-bottom を使用します

要素を使用して、フッター以外の他のコンテンツをラップします。フッターの高さと正確に等しくなるように、負の margin-bottom を指定します。これは最も基本的なアプローチです (例)。

例: 負のマージンを使用してフッターを接着します

<body>  <div class="wrapper">      content    <div class="push"></div>  </div>  <footer class="footer"></footer></body>

ログイン後にコピー

html, body {  height: 100%;  margin: 0;}.wrapper {  min-height: 100%;  /* Equal to height of footer */  /* But also accounting for potential margin-bottom of last child */  margin-bottom: -50px;}.footer,.push {  height: 50px;}

ログイン後にコピー

この方法では、負のマージンが確実に機能するようにコンテンツ領域に追加の要素 (.push 要素) を追加する必要があります。実際のコンテンツをカバーするためにフッターが表示されます。また、.push 要素に独自の margin-bottom を持たないことをお勧めします。その場合、プッシュの高さと .wrapper の margin-bottom がマイナスのマージンにカウントされます。数値が違うので、あまり良くないようです。

フッターに負のマージントップを使用します

この手法にはプッシュ要素は必要ありませんが、それに応じて、対応するコンテンツを生成するには、コンテンツの外側に要素の追加レイヤーをラップする必要があります。パディングボトム。これは、マイナスのマージンによってフッターが実際のコンテンツを覆ってしまうのを防ぐためでもあります。

例: 負のマージンを使用してフッター 2 を貼り付ける

<body>  <div class="content">    <div class="content-inside">      content    </div>  </div>  <footer class="footer"></footer></body>

ログイン後にコピー

html, body {  height: 100%;  margin: 0;}.content {  min-height: 100%;}.content-inside {  padding: 20px;  padding-bottom: 50px;}.footer {  height: 50px;  margin-top: -50px;}

ログイン後にコピー

この手法には、前の手法と同じ欠点があります。つまり、どちらも追加の HTML 要素を追加する必要があります。

cacl() でラッパーの高さを下げる

要素を追加せずに、cacl() でラッパーの高さを調整する方法があります。これには追加の要素は必要ありません。100% の高さを共有する 2 つの要素を並べて配置するだけです。

例: calc() を使用したスティッキーフッター

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

ログイン後にコピー

.content {  min-height: calc(100vh - 70px);}.footer {  height: 50px;}

ログイン後にコピー

calc() を使用して 70 ピクセルを差し引き、フッターを 50 ピクセルに修正したことに注意してください。これは、コンテンツの最後の要素の margin-bottom が 20 ピクセルであることを前提としています。 margin-bottom とフッターの高さが加算され、ビューポートの高さから減算されます。さらに、ここではビューポートユニット (vh - 翻訳者注) も使用しています。これは、ラッパーの高さを 100% に設定する前にボディの高さを 100% に設定する必要を回避するためのもう 1 つの小さなトリックです。

フレックスボックスがあります

フレックスボックスの使用

上記 3 つの手法の大きな問題は、フッターの高さを固定する必要があることです。一般に、固定高さは Web デザインには適していません。内容は変更になる場合がございます。柔軟性が必要です。固定高さは通常赤色に点灯します。フレックスボックスを使用して接着フッターを実装すると、追加の要素が必要ないだけでなく、フッターの高さの可変もサポートされます。

例: フレックスボックスを使用したフッターの接着

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

ログイン後にコピー

html {  height: 100%;}body {  min-height: 100%;  display: flex;  flex-direction: column;}.content {  flex: 1;}

ログイン後にコピー

.content の前面にヘッダーを追加したり、背面にさらにコンテンツを追加したりすることもできます。フレックスボックスを使用するコツは次のとおりです:

ウィンドウのスペースを自動的に埋める子要素 (この場合は .content 要素) に flex: 1 を設定します。
あるいは、margin-top:auto を設定して、子要素をその前の要素からできるだけ遠くに移動することもできます (または、必要に応じてどちらかの方向のマージンを選択します)。 (上記の flex:1 は margin-bottom:auto でも使用でき、コンテンツは margin:auto 0 で垂直方向の中央に配置できます。Flex レイアウトは素晴らしいです - 翻訳者注)

覚えておいてください。フレックスボックス関連のすべての完全ガイドについて質問があります。

グリッドを使用する

グリッドレイアウトは新しいテクノロジです (現在、グリッドレイアウトをサポートしているブラウザはフレックスボックスよりも少ないです)。それに関する完全なガイドもあります。これを使用してグルーフッターを実現するのも非常に簡単です。

例: グリッドを使用してフッターを接着する

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

ログイン後にコピー

html {  height: 100%;}body {  min-height: 100%;  display: grid;  grid-template-rows: 1fr auto;}.footer {  grid-row-start: 2;  grid-row-end: 3;}

ログイン後にコピー

この例は、Chrome Canary または Firefox 開発バージョンでのみ機能し、Edge バージョンでは古いグリッドレイアウトにダウングレードされる可能性があります。

英語原文：https://css-tricks.com/couple-takes-sticky-footer/