Twitter Bootstrap 3スティッキーフッター

204

Twitterブートストラップフレームワークをかなり長い間使用していますが、最近バージョン3に更新されました！

スティッキーフッターを下に貼り付けるのに問題があります。TwitterブートストラップWebサイトから提供されているスターターテンプレートを使用しましたが、まだうまくいきません。

html  css  twitter-bootstrap  twitter-bootstrap-3 
— ブラッド・フレッチャー
ソース
31
— ptim
3
@memeLabなぜ公式の例ではbody margin-bottom：-60pxについて何もないのですか？それとも私はそれを逃した...？
— 2014
スティッキーフッターの高さを変更できるCSSのみのソリューションを追加しました。新しい答えであるため、ページの下部にあるので、ここにリンクしました。
— tao、

回答:

193

クラスnavbar-fixed-bottomをフッターに追加するだけです。

<div class="footer navbar-fixed-bottom">
— ジョン
ソース
32
これはスティッキーフッターとは
— 異なります
3
ヘッダーとフッターがある場合、モバイルデバイスのスペースが大きくなりすぎます。
— strattonn 2014年
4
メディアクエリの目的である
— @strattonn
20
ページがスクロールを必要としない場合、これは完全に機能します。しかし、フッターはページ上のより多くのコンテンツと重なります。これの回避策はありますか？ありがとう！
— Xplora、2015年
1
オーバーラップの問題については不明ですが、マージン/パディングを追加しても問題は解決しませんか？
— Jon
152

公式のBoostrap3スティッキーフッターの例を参照すると、を追加する必要はなく<div id="push"></div>、CSSの方が簡単です。

公式の例で使用されているCSSは次のとおりです。

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

必須のHTML：

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

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

      </div>
    </div>
</body>

このcssのリンクは、sticky-footerの例のソースコードにあります。

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

完全なURL：http : //getbootstrap.com/examples/sticky-footer/sticky-footer.css

— tkymtk
ソース
21
公式のsticky-footerサンプルのHTMLとCSSは、ここで説明されているものとはかなり異なります。たとえば、「wrap」divはもう使用されません。
— IanB 2014年
52

これは、すでにBootstrapにあるもの以外の追加のCSSまたはJavaScriptを必要とせず、現在のフッターに干渉しないスティッキーフッターを追加するメソッドです。

例： 簡単なスティッキーフッター

これを直接コピーしてコードに貼り付けてください。大騒ぎはありません。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— アナタリオックス
ソース
4
とても素晴らしく、素早く。同様に応答することができます。ただし、フッターに隠れないように、ページコンテンツの下部にスペースを追加する必要があります。スペースの高さはフッターの高さと同じにする必要があります。最善の方法を教えていただけますか？ところで「CSSを必要としない」は技術的に間違っています。これは、あるべき「ブートストラップクラス以外の任意の追加のCSSを必要としません」。
— ADTC 2015年
1
これはブートストラップに存在するものを活用するのが大好きです。私は他のトップ回答を機能させることができませんでしたが、これを私のページとバム、スティッキーフッターに貼り付けました。ありがとう！
— haakon.io 2017年
34

追加したCSSに加えて、ラップdivを閉じる前にpush divを追加する必要があることに注意してください

HTMLの基本構造は次のとおりです。 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

ライブビュー
編集ビュー

— デビッド・タイアロア
ソース
ページのコンテンツが利用可能なディスプレイよりも大きい場合、フッターは押し下げられます。フッターが本当に下にくっついて欲しい（navbar-fixed-bottomなど）
— blueFast
@delavnogさん、このようなものはあなたのために機能しますか？codepen.io/panchroma/pen/wMXWpY。あなたにとって唯一の重要な部分は、行647のHTMLとCSS
— David Taiaroa '29年
@delavnog、同じアイデア、ページcodepen.io/panchroma/pen/JGZKqyの
— David Taiaroa
ありがとうございます。さて、もし私がメインdivをnavとフッターの間の垂直方向の中央に配置できるとしたら、それは素晴らしいことです！codepenを編集しました：codepen.io/anon/pen/rxKMaW（navがコンテンツの上部を食べているため、本文にマージンを追加する必要がありました）
— blueFast
@delavnog、本体が高すぎない場合のスタートです。より長いコンテンツの場合は、より多くの作業が必要になります。codepen.io
— David Taiaroa
30

ここだスティッキーフッター簡略化されたコード、彼らは常にそれを最適化しているので、今日のように、これはGOODです。

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— レニエル・マッカフェリ
ソース
1
完璧なソリューション。それが私が探していたものです。
— Levimatt
1
残念ながら、このフッターはサイズが固定されています。時々、フッターが動的な場合、CSSでの高さよりも大きくまたは小さくなります。
— 2016年
27

少し遅れましたが、質問に噛まれたばかりなので、この投稿に出くわしました。ついに本当に簡単な方法を見つけました。クラスを有効にnavbarしてを使用するだけnavbar-fixed-bottomです。例えば：

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

— iMil
ソース
私はあなたの答えのシンプルさと効果が好きです。ちなみにそれはインテリジェントな答えです。同じ問題に対する多くの答えは、jqueryと複雑なものでいっぱいです。ありがとう。
— digitai '13
1
その半分の解決策ですが、サイズを変更した場合でも、ページ上のコンテンツの重複に注意する必要があります。
— Baldráni
@Baldráni完全なソリューションではありません。フッターのHTMLでBootstrapの行と列を使用する場合、オーバーラップは正常に機能します（とにかくこれを行う必要があります）
— Tino Mclaren
これはスティッキーフッターではありません。これは、ナビゲーションバーのコンテンツにのみ適しており、ページコンテンツと重なる固定下部のナビゲーションバーです。
— Zim
10

これがこの問題に対する私の更新された解決策です。 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

次のように使用します。 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

または 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— ジー
ソース
4
フッターは修正されているため、ページコンテンツ（存在する場合）と重複しているため、これは適切なソリューションではありません。some text<br>フッターの前に数行追加して、ウィンドウのサイズを小さくしてみてください。
— jmarceli 2014年
@ user2041318：うん恐ろしい...これを指摘してくれてありがとう。
— セバスチャン
これは、jmarceliコメントに従って修正されました。フッターは修正されなくなりました。
— zee
3

付箋の例は私にはうまくいきません。私の解決策：

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— アンディギガ
ソース
シンプルで古き良きCSS。仕事が終わりました。高評価の回答のいくつかが複雑であることは面白いと思います。ブートストラップは私たちの生活を楽にするはずではありませんか？😂
— カル
2

プッシュdivはwrap。の直後ではなく、次のようになります。 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— ジョセフ
ソース
2

OPによる回答：

これをCSSファイルに追加します。

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
— CodeCaster
ソース
2

柔軟なスティッキーフッターが欲しかったので、ここに来ました。トップアンサーは正しい方向に私を導きました。

現在の（10月16日2）Bootstrap 3 cssスティッキーフッター（固定サイズ）は次のようになります。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

フッターのサイズが固定されている限り、ボディのマージン下部はプッシュを作成して、フッターがポケットに収まるようにします。この場合、両方が60pxに設定されています。ただし、フッターが固定されておらず、高さが60ピクセルを超える場合、フッターはページコンテンツを覆います。

柔軟にする：CSSの本文のマージンとフッターの高さを削除します。次にJavaScriptを追加してフッターの高さを取得し、本文のmarginBottomを設定します。これは、setfooter（）関数で行われます。次に、ページが最初に読み込まれたとき、およびサイズ変更時にsetfooterを実行するためのイベントリスナーを追加します。注：フッターにアコーディオンなど、ウィンドウのサイズを変更せずにサイズ変更をトリガーするものがある場合は、setfooter（）関数を再度呼び出す必要があります。

スニペットを実行してから全画面表示してデモを行います。

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
スニペットを展開

— スターナー
ソース
2

単純なjs

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

アップデート＃1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
ソース
1

これらのすべてを要約するには、フッターを除くすべての要素が持つべきmin-height: 100%か、それより少し少ないべきことを1つ覚えておいてください。

— クシリッシュ
ソース
1

LESSを使用して、パディング付きの簡略化したスティッキーフッターコードを記述します。質問はパディングに関するものではないため、この回答はトピックから外れている可能性があります。詳しくは、この投稿を確認してください。

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— フレッドK
ソース
1

Jek-fdrvの回答に基づいて.on('resize', function()、すべてのデバイスとすべての解像度で機能することを確認するためにを追加しました：

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— Iamchriswick
ソース
1

ブートストラップの現在のバージョンは、この関数ではもう機能していないようです。sticky-footer-navbarの例をダウンロードして、メインのボディ領域に大量のコンテンツを配置すると、フッターはビューポートの下部を越えて押し下げられます。べたつかないです。

— CJカタラーノ
ソース
1

これは、完全に応答する可変高さのスティッキーフッターのためのCSSベースのソリューションです。
利点：フッターは高さを可変にすることができます。これは、CSSで高さをハードコーディングする必要がなくなるためです。

コードスニペットを表示

そして、ここで非接頭辞SCSS（のためのgulp/ grunt）：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— タオ
ソース
1

フレックスを使うだけ！HTMLでbodyとmainを使用してください。IE9のサポートが必要でない限り、これは最良のソリューションの1つです。高さを固定したり、類似したりする必要はありません。

それはマテリアライズにもお勧めです！

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

main {
    flex: 1 0 auto;
}
— ケンター
ソース
0

Haml＆Sassの言葉で必要なことはすべて次のとおりです。

ハムル app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

サス app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

http://getbootstrap.com/examples/sticky-footer-navbar/に基づく

— 同等8
ソース
0

フッターのクラスでブートストラップビルドを使用したくない場合。また、javascriptを記述する必要があります。

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

固定フッターによるコンテンツの重複を防ぎpadding-bottom、ユーザーがウィンドウ/画面サイズを変更したときにを調整します。

上記のスクリプトでは、フッターは次のようにbodyタグ内に直接配置されると想定しています。

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

これは間違いなく最良の解決策ではありません（JSを回避できるため）。ただし、オーバーラップの問題heightはなく、実装も応答も簡単です（CSSでハードコードされていません）。

— jmarceli
ソース
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
スニペットを展開

— GPAK
ソース
底のべたつきはどうですか？
— セバスチャン
0

これは、ブートストラップで使用できる非常にシンプルでクリーンなスティッキーフッターです。完全に応答性！

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

例：CodePenデモ

— ゴスバーツ
ソース
このソリューションでは、絶対配置により、ブートストラップモーダルを開くときにフッターバーが右に移動します。
— テタクリ2016年
0

CSS-tricksのflexbox人たちによると、使用は私が見つけた最も簡単な方法です。これは真のスティッキーフッターです。コンテンツがページの100％未満で、ページの100％を超える場合に機能します。

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

そしてCSS：

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

これはブートストラップに依存しないため、ブートストラップを使用しても使用しなくても機能することに注意してください。

— Bustawin
ソース
0

フッターナビゲーションバーにクラスを追加してみてください。

navbar-fixed-bottom

そして、名前のCSS作成のcustom.cssと身体のこのようなパディングを...

body { padding-bottom: 70px; }
— イクラム-ウド-ダウラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.