フッターをWebページの下部に配置するにはどうすればよいですか?


291

マークアップの右と左の両方のdivをクリアするフッター付きのシンプルな2列のレイアウトがあります。私の問題は、すべてのブラウザーでフッターがページの下部に留まらないことです。コンテンツがフッターを押し下げると機能しますが、常にそうであるとは限りません。


@Jimmyに追加します。フッターを含む要素への絶対(または相対)位置を宣言する必要もあります。あなたの場合、それはbody要素です。編集:私は
Firebugを使用

:このリンクが言うように、HTMLページ・ツー・フルハイトを伸ばすよ必要かもしれmakandracards.com/makandra/...を
シーナ

回答:


199

スティッキーフッターを取得するには:

  1. 持っている<div>class="wrapper"あなたのコンテンツのために。

  2. の前に終値</div>wrapper場所 <div class="push"></div>

  3. 後のクロージング</div>wrapper場所 <div class="footer"></div>

* {
    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 */
}

4
@jlp:フォームタグをheight:100%ステートメントに追加する必要があります。そうしないと、スティッキーフッターが壊れます。このように:html、body、form {height:100%;}
dazbradbury

フッターにパディングを追加するとネジがねじれることに気づきましたが、{footer、push}の高さからフッターの余分なパディングを差し引くことで修正できることがわかりました。
nicooga 2012年

1
デモの詳細な説明は、このサイトで提供されています。CSSスティッキーフッター
mohitp

ちょっと私はあなたのステップを踏みました、そしてそれは大きなページのためにかなりうまくいきます。しかし、ユーザーがフッターを下にスクロールできない小さなページでは、一番下に少しあります。したがって、ほとんど空のページがスクロール可能になります。誰でもこれを修正する方法を知っていますか?ここに私のテストページが表示されます。sheltered
escarpment

1
@Syk min-heightを減らすことが役立つことがわかりました。94%がOKの値ですが、あなたはまだわからない真の解決策はここにあります:(モバイル上の問題を参照してください。
ACK_stoverflow

84

CSS vhユニットを使用してください!

おそらく、フッティを移動するための最も明白でハックのない方法は、新しいcssビューポートユニットを利用することでしょう。

たとえば、次の簡単なマークアップを見てみましょう。

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

ヘッダーの高さが80pxで、フッターの高さが40pxである場合、コンテンツdivに関する1つのルールでスティッキーフッター作成できます。

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

つまり、コンテンツdivの高さを、ビューポートの高さからヘッダーとフッターの合計の高さを差し引いた値の少なくとも 100%にします。

それでおしまい。

...そして、同じコードがコンテンツdiv内の多くのコンテンツでどのように機能するかを次に示します。

注意:

1)ヘッダーとフッターの高さがわかっている必要があります

2)古いバージョンのIE(IE8-)およびAndroid(4.4-)は、ビューポートユニットをサポートしていません。(カニユーズ

3)昔々、webkitは計算ルール内のビューポート単位に問題がありました。これは確かに修正されました(ここを参照してください)ため)、問題はありません。ただし、何らかの理由でcalcの使用を避けたい場合は、負のマージンとボックスサイズによるパディングを使用して回避できます-

そのようです:


4
これは、私がここで見た最高の解決策であり、.contentの一部のコンテンツがフーターにオーバーフローして、誰が何を知っているのかを知る奇妙なケースでも機能しました。そして、Sassや変数などのsthを使用すると、これまで以上に柔軟になる可能性があります。
themarketka 2014

1
確かに、これは魅力のように機能します。サポートされていないブラウザでも簡単にフォールバックできます。
アラミール2015

3
絶対測定値をいじるのがまだハッキングされていないのですか?せいぜいそれほどハックではないでしょう
ジョナサン

しかし、フッターとヘッダーの高さがピクセルではなくパーセントで測定される場合はどうでしょうか?ページの高さの15%が好きですか?
Fernanda Brum Lousada 2017

3
ビューポートユニットは、スクロール位置に応じてアドレスバーを非表示または表示するモバイルブラウザーで期待どおりに機能しない場合があります
Evgeny

57

付箋フッター display: flex

フィリップウォルトンのスティッキーフッターに触発されたソリューション。

説明

このソリューションは、次の場合にのみ有効です

  • クロム≥21.0
  • Firefox≥20.0
  • Internet Explorer≥10
  • Safari≥6.1

これはflexディスプレイに基づいており、flex-growプロパティを利用して、要素を高さまたは幅のいずれかに成長させることができます(がまたはに設定されている場合)flow-directioncolumnrow容器に余分なスペースを占有するように、それぞれ)。

我々はまた、レバレッジしようとしているvhユニット、1vhされるように定義します

ビューポートの高さの1/100

したがって、その高さは100vh、要素にビューポートの高さ全体に及ぶように伝える簡潔な方法です。

これはあなたのウェブページをどのように構成するかです:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

ページの下部にフッターを固定するには、ページの下部にあるフッターを押すのと同じくらいに、本文とフッターの間のスペースを大きくする必要があります。

したがって、レイアウトは次のようになります。

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

実装

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

JSFiddleで遊ぶことができます。

サファリの癖

Safariにはプロパティの実装に欠陥があるためflex-shrink、コンテンツを表示するために必要な最小の高さを超えて項目を縮小できることに注意してください。この問題を解決するには、設定する必要がありますflex-shrinkに0にプロパティを明示的に.contentし、footer上記の例では:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

13
これは正解だと思います。フッターの高さがわからない場合でも機能するのは、これが実際の唯一の方法だからです。
fstanis

これは、ニート2を使用してグリッドを混乱させます
Halfacht

しかし、なぜフィリップウォルトンのソリューション自体ではなく、なぜ余分な「スペーサー」要素があるのでしょうか。
YakovL

@YakovL Waltonのソリューション.Site-content要素ではと同じ役割を果たしますspacer。それは別様に呼ばれています。
ガーマン

@Germanはよく、このマークアップに.Site-contentアナログがあり.contentます。しかし、気にしないで、gcedoがそれについていくつかの特定のアイデアを持っている場合、推測する必要はない
YakovL

30

position: absolute以下を使用してページの下部にフッターを配置できますが、フッターに隠れないように、2つの列が適切でmargin-bottomあることを確認してください。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

私は同様の設定(2列+フッター)でこれを試しましたが、機能しません。
同型写像

14
コンテンツが大きくなると、コンテンツと重複します。
Satya Prakash

1
そのため、コンテンツにはマージンボトムがあります。フッターにする固定の高さに設定する必要があります。
ジミー

価値があるものについては、何かがゼロ値である場合、それがどの測定単位にあるかは問題ではなく、何もないため0px、私が見たすべてのスタイルシートのすべてのはちょうどであるはず0です。
ジョナサン

ページの高さがディスプレイの高さよりも大きい場合、またはフッターのコンテンツの長さが動的な場合はどうなりますか?この問題の解決策については、私の回答をご覧ください。
Ravinder Payal 2016

15

これは、魅力のように機能するjQueryのソリューションです。ウィンドウの高さが本体の高さより大きいかどうかをチェックします。そうである場合は、フッターのマージン上部を変更して補正します。Firefox、Chrome、Safari、Operaでテスト済み。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

フッターに既にマージン上部(たとえば50ピクセル)がある場合は、次の最後の部分を変更する必要があります。

css( 'margin-top', height_diff + 50 )

1つの代替方法は、フッターの直前に「プッシャー」divを追加することです。次に、プッシャーdivの高さを設定します。これにより、既存のマージントップに対処する必要がなくなります
Sarsaparilla

非jsソリューションの私の答えを参照してください。
ferit

11

CSSを次の#footerように設定します。

position: absolute;
bottom: 0;

その後、追加する必要がありますpaddingか、marginあなたの下へ#sidebar#contentの高さが一致する#footerとき、または、それらが重なると、#footerそれらをカバーします。

また、私が正しく覚えている場合、IE6はbottom: 0CSSに問題があります。IE6のJSソリューションを使用する必要がある場合があります(IE6が気になる場合)。


10
ウィンドウが小さすぎる場合、フッターはこのCSSでコンテンツの前に表示されます。
Seichi

1
私の回答@Seichiをご覧ください
フェリット

6

@gcedoと同様のソリューションですが、フッターを押し下げるために中間コンテンツを追加する必要はありませんmargin-top:autoフッターに追加するだけで、高さや上のコンテンツの高さに関係なく、ページの下部にプッシュされます。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>


1
別のアプローチは.content flex: 1 0 auto;、それを成長可能で揺れ動かさないようにすることmargin-top: auto;ですが、フッターのスタイリングを含む素晴らしいトリックであり、「非関連」.contentではありません。実際には、フレックスは、このアプローチで必要とされる理由は、私は疑問に思う..
YakovL

@YakovLはい、ここでの主なアイデアはマージントップトリックです;)私はこのようなコンテンツを作成できることを知っていますが、これはコンテンツによってフッターをプッシュするという以前の回答とほとんど同じです...そして、ここで私はこれを避けて、マージンだけでフッターをプッシュしたかったのです。)
Temani Afif '22

margin:autoはflexアイテムとブロックアイテムでわずかに異なる動作をするため、@ YakovL flexはmargin:auto :)には必要です。削除しdisplay:flexても機能しない場合は、通常のブロック要素フローになります
Temani Afif 2018

ええ、それなしでは機能しないことがわかりますが、なぜなのかはわかりません(「わずかに異なる」のは何
ですか

1
@YakovLシンプルです。通常のブロック要素を使用すると、フローは常に行方向になるため、autoで使用されるマージンの右/左のみが機能します(有名なmargin:0 autoセンターブロック要素と同様)。ただし、列方向がないため、マージンはありません。上/下で自動。Flexboxには行/列の方向があります;)。これはわずかな違いですが、マージンはフレックスボックス内でも要素を整列するために使用されるため、行方向でもmargin-top / bottom autoを使用して垂直方向に整列できます。詳細については、こちらをご覧ください:w3.org/TR/css- flexbox-1 /#auto-margins
Temani Afif

5

ここに画像の説明を入力してください

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

出典:https : //www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/


2

私は時々これに苦労しており、それらすべてのdivが相互に含まれているソリューションは厄介なソリューションであることにいつも気づきました。私は少しそれをいじりました、そして私は個人的にこれがうまくいくことを個人的に見つけました、そしてそれは確かに最も簡単な方法の一つです:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

これについて私が気に入っているのは、追加のHTMLを適用する必要がないことです。このCSSを追加して、いつでもHTMLを書くことができます


これでうまくいきましたが、フッターにwidth:100%を追加しました。
Victor.Uduak 2018

2

以来グリッド・ソリューションがまだ提示されていない、ここではわずか2つので、ある宣言のための親要素我々が取る場合、height: 100%そしてmargin: 0当然のこと:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

アイテムは、横軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテムの各ペア間の間隔は同じです。最初のアイテムは主開始エッジとフラッシュし、最後のアイテムは主終了エッジとフラッシュします。


1

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

これは、ページの下部に配置されたレスポンシブフッターを探している場合に役立ちます。これにより、常にビューポートの高さの80%の上マージンが維持されます。


1

絶対配置とz-indexを使用して、次の手順で任意の解像度でスティッキーフッターdivを作成します。

  • でフッターdivを作成する position: absolute; bottom: 0;希望する高さの
  • フッターのパディングを設定して、コンテンツの下部とウィンドウの下部の間に空白を追加します
  • div本文をラップするコンテナを作成しますposition: relative; min-height: 100%;
  • メインコンテンツに下パディングを追加する divにフッターの高さとパディングを足したものに等しい
  • フッターがクリップされている場合は、フッターのをz-indexコンテナより大きく設定しdivます

次に例を示します。

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>


1

この質問では、私が見た答えの多くは不格好で、実装が難しく、非効率的であるため、私はそれを試して、ほんの少しのcssとhtmlである独自のソリューションを思いつくと思いました

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

これは、フッターの高さを設定し、css calcを使用して、ページがフッターの一番下にあるときの最小高さを計算することで機能します。



0

これらの純粋なcssソリューションはいずれも、動的にサイズ変更されるコンテンツ(少なくともfirefoxとSafariでは)で適切に機能しません。テーブルはスタイル付き領域の下部からはみ出す可能性があります。つまり、フォントの色と背景色の両方が白であるため、テーブルの半分を黒のテーマで白にし、半分を完全に白にすることができます。基本的に、themerollerページでは修正できません。

ネストされたdivマルチカラムレイアウトは醜いハックであり、フッターを貼り付けるための100%の最小高さのbody / container divは醜いハックです。

私が試したすべてのブラウザで機能する唯一のスクリプトなしのソリューション:ad(ヘッダー用)/ tfoot(フッター用)/ tbody(任意の数の列のtd)と100%の高さを備えた、よりシンプルで短いテーブル。しかし、これは意味的およびSEOの欠点を認識しています(tfootはtbodyの前に現れる必要があります。ARIAの役割はまともな検索エンジンに役立つ可能性があります)。


0

複数の人がこの単純な問題への答えをここに上げましたが、自分が間違っていることを理解するまでにどれほどイライラしていたかを考慮して、追加すべきことが1つあります。

前述したように、これを行う最も簡単な方法はそのようなものです。

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

しかし、おそらく通常はデフォルトであるため、投稿で言及されていないプロパティは、位置です:static、bodyタグのです。相対位置は機能しません!

私のワードプレスのテーマはデフォルトのボディ表示を上書きしており、不愉快に長い間私を混乱させていました。


0

私が知っている古いスレッドですが、レスポンシブソリューションを探している場合は、このjQueryの追加が役立ちます。

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完全なガイドはここにあります:https : //pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/


0

私は非常にシンプルなライブラリを作成しましたhttps://github.com/ravinderpayal/FooterJS

使い方はとても簡単です。ライブラリを含めたら、次のコード行を呼び出します。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

上記の関数を異なるパラメーター/ IDで呼び出すことにより、フッターを動的に変更できます。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注:-CSSを変更または追加する必要はありません。ライブラリは動的であるため、ページの読み込み後に画面のサイズが変更されても、フッターの位置がリセットされます。このライブラリを作成しました。CSSはしばらくの間問題を解決しますが、ディスプレイのサイズがデスクトップからタブレットに、またはその逆に大幅に変更されると、コンテンツが重複するか、粘着性がなくなるためです。

別のソリューションはCSSメディアクエリですが、このライブラリは自動的に機能し、すべての基本的なJavaScriptサポートブラウザーでサポートされていますが、画面のサイズに応じて異なるCSSスタイルを手動で作成する必要があります。

CSSソリューションを編集

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

表示の高さがコンテンツの長さよりも大きい場合は、フッターが下に固定されます。そうでない場合は、表示するためにスクロールする必要があるため、表示の一番端に自動的に表示されます。

そして、それはJavaScript /ライブラリーよりも優れたソリューションのようです。


0

私は以前このページで提案された解決策に全く運がありませんでしたが、ついにこの小さなトリックがうまくいきました。私はそれを別の可能な解決策として含めます。

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

0

フレックスボックスソリューション

フレックスレイアウトは、ヘッダーとフッターの自然な高さに適しています。このフレックスソリューションは最新のブラウザーでテストされ、実際にはIE11で動作します。

JS Fiddleを参照してください

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

0

私にとってそれを表示する最も良い方法(フッター)は下部にくっついていますが、常にコンテンツを覆っていません。

#my_footer {
    position: static
    fixed; bottom: 0
}

1
この構文は正しいですか?位置は静的または固定されているはずですか?
stealththeninja

0

jQuery CROSS BROWSER CUSTOM PLUGIN-$ .footerBottom()

または、私と同じようにjQueryを使用して、フッターの高さをautoまたはに設定しますfix。好きなように、とにかく動作します。このプラグインはjQueryセレクターを使用するため、機能させるには、ファイルにjQueryライブラリーを含める必要があります。

プラグインを実行する方法は次のとおりです。jQueryをインポートし、このカスタムjQueryプラグインのコードをコピーして、jQueryのインポート後にインポートします。非常にシンプルで基本的ですが、重要です。

それを行うときは、次のコードを実行するだけです。

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

ドキュメント準備イベント内に配置する必要はありません。そのまま正常に動作します。ページが読み込まれたとき、およびウィンドウのサイズが変更されたときに、フッターの位置が再計算されます。

ここにあなたが理解する必要のないプラグインのコードがあります。それを実装する方法を知っているだけです。それはあなたのために仕事をします。ただし、どのように機能するかを知りたい場合は、コードを調べてください。コメントを残しました。

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>


Vanilla java-scriptはプラグインよりも長くありません。
Ravinder Payal 2017

0

フレックスソリューションを使用してフッターをスティッキーにするまでは問題ありませんでしたが、フレックスレイアウトを使用するようにボディを変更すると、ページレイアウトの一部が変更され、改善されませんでした。最終的に私のために働いたのは:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

これは、https: //css-tricks.com/couple-takes-sticky-footer/のctf0の応答から取得しました


0

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}
<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>


0

固定位置を使用したくない場合や、モバイルで迷惑にフォローする場合は、これまでのところ問題なく機能しているようです。

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

ちょうどにHTMLを設定min-height: 100%;し、position: relative;その後、position: absolute; bottom: 0; left: 0;フッターに。次に、フッターが本文の最後の要素であることを確認しました。

これが他の人にとってうまくいかないかどうか、そしてその理由を教えてください。これらの退屈なスタイルのハックは、私が考えていないさまざまな状況で奇妙な動作をする可能性があることを知っています。


-1

コンテンツとサイドバーの周りにコンテナーdiv(overflow:auto)を配置してみてください。

それが機能しない場合、フッターが正しく表示されていないスクリーンショットまたはサンプルリンクがありますか?

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