ページの下部へのフッターのフラッシュ、Twitterブートストラップ

306

私はcssを使用してフッターをフラッシュする手法に一般的に精通しています。

しかし、私はこのアプローチをTwitterブートストラップで機能させるのにいくつかの問題を抱えています。おそらく、Twitterブートストラップが本質的に応答性があるという事実が原因です。Twitterブートストラップを使用すると、上記のブログ投稿で説明されているアプローチを使用して、フッターをページの下部にフラッシュすることができません。

css  twitter-bootstrap  footer 
— カルバン・チェン
ソース
以下のすべての回答をテストする前に、OPはtwitterブートストラップで動作することを望んでいることに注意してください。これは必須ではないため、twitterブートストラップはJqueryで動作します。つまり、JavaScriptが有効になっていることを意味します。そのため、私の回答をテストしてください： / questions / 10099422 /…
— HenryW 2014年
4
— ユーザー、
1
リンク切れ！誰でも公式のサンプルリンクを修正できますか？
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar 4.0のせいで、将来は古いバージョンになるかもしれませんね。
— Ammad Khalid

回答:

324

ここのスニペットがブートストラップに非常にうまく機能することがわかりました

HTML：

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
— チュアン・ヨン
ソース
これは私がこれまでに試みた最良の解決策です。これを答えとして受け入れました。
— Calvin Cheng
こんにちは、私はこの方法を実装しました、それは素晴らしい働きをしますが、今私はiPhoneでページを表示することでいくつかの問題を抱えています（ページがズームインされています）。問題は何ですか？ここではいくつかの詳細です：stackoverflow.com/questions/18621090/...
— pupadupa
94
念のためにあなたはこの答えを読んだし、他の回答を見て、それの価値が上下にスクロールされません
— MattyW
4
— HenryW
1
これは、Bootstrapで見つけた最良の方法です。デバイスの応答性については、メディアクエリを使用して、さまざまな画面サイズの#mainおよび.footerの高さを更新してください
— SyntaxGoonoo
467

これはBootstrap 2.2.1に含まれています。

ブートストラップ3.x

navbarコンポーネントを使用して.navbar-fixed-bottomクラスを追加します。

<div class="navbar navbar-fixed-bottom"></div>

ブートストラップ4.x

<div class="navbar fixed-bottom"></div>

追加することを忘れないでくださいbody { padding-bottom: 70px; }。そうしないと、ページのコンテンツがカバーされる可能性があります。

ドキュメント：http : //getbootstrap.com/components/#navbar-fixed-bottom

— サノン
ソース
35
@ChuanYeong残念ながらありませんnavbar-static-bottom。
— Lawrence Woodman、
25
@MikeCurry彼は固定フッターについて質問しませんでしたが、フッターが下部にとどまるのに十分なコンテンツがページにない場合、空のスペースを「埋める」フッターです。フッターが情報のみの場合、固定されたフッターは貴重なスペースのみを使用しています。
— rdlu
22
これは、stickyフッターではありません。これは、position：fixedを使用しているためです。これは正しくありません
— フルカットU. 2013
9
はい、このソリューションは、ページの下部ではなく、ビューポートの下部にのみフラッシュします。つまり、フッターは常に表示されます。
— rism 2013年
3
混乱を招くため、回答に反対票を投じる必要がありました。OPはスティッキーフッターを必要としません。
— HenryW 2014年
77

Twitterブートストラップの実際の例NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

ユーザーがdevtoolsを開いたり、ウィンドウのサイズを変更した場合に常に更新されるバージョン。

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

少なくとも、 #footer

コンテンツが画面に収まる場合にスクロールバーが不要な場合は、値を10から0に変更するだけです。コンテンツが画面に収まらない場合は、スクロール
バーが表示されます。

— HenryW
ソース
9
うん、これも一緒に行きました。CSSは時々とても愚かです。不可能ではありませんが、汎用のソリューションはなかなか手に入れられないかもしれません。このような迷惑なものをレイアウトで修正しても、スタックの交換、複数の要旨の改訂、ブラウザ間のテスト、そして最終的には単純なJSへの降伏は必要ありません。騙す。ええ、私は少し汚れているように感じますが、少なくともそれは機能します。
— meecect 2014年
3
私が調べたすべてのソリューションは間違っています。これは、実際に想定されていることを実行する唯一のものです。ブラウザのサイズが変更されてもコンテンツが不明瞭になることなく、ページの下部にフッターを貼り付けます。
— デイブ
13
それは私にとって期待どおりに静かに機能しませんでしたが、それでも良い答えの1つです。次のように置き換えることで問題を修正しまし$('#footer').height();た$('#footer').outerHeight();
— DarkMukke
3
正解です。私はここでそれを改善すると思ういくつかの適応をしました：stackoverflow.com/a/36385654/8207
— Cory
6
私が見つけた最良の答え。ウィンドウのサイズ変更後に機能させる場合は、回答のメインコードを中に入れ、ページが読み込まれたときに設定するように$(window).resize(function() {//main code goes here});呼び出し$(window).resize();ます。
— SzymonSadło16年
36

これを公式ページから実装する方法は次のとおりです。

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

私は今それをテストしました、そしてそれはうまくいきます！:)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

関連する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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
— レニエル・マッカフェリ
ソース
7
これを投稿してくれてありがとう、それは間違いなく私の特定のプロジェクトにとって最良の解決策（機能した唯一のものは言うまでもありません）でした。もちろん、それがプロジェクト自体から直接のものであることは素晴らしいことです。
— Cory W.
1
契約がどういうものかはわかりませんが、ページにスクロールを追加しないとうまくいきませんでした。最終的に.wrapper CSSを変更して、min-heightが "calc（100％-120px）"になるようにしました。ここで、120pxはフッターの高さであり、HTMLから<div id = "push"> </ div>を削除しましたそれは私が必要としなかったページに高さを追加すること以外は何もしていないようだったので。
— jammyman34 2016年
36

以下のためにスティッキーフッター、我々は2を使用してDIV's基本的なHTMLのためにスティッキーフッター効果。このように書きます：

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— Sandeep
ソース
7
彼はTwitter Bootstrapを使用していると彼は言った。HTMLを完全に書き直さずにこれをBootstrapに統合する最も簡単な方法は何でしょうか？
— コーディグレイ
1
OPほしいですのスティッキーフッターの効果を達成するならば、彼は彼のマークアップ変更する必要があります
— サンディープ
ありがとうございました！これは、Bootstrapを使用するASP.NET MVC5サイトで実際に機能した唯一の方法でした。+1
— ヤンデュラン
19

さて私は、ミックスを発見navbar-innerし、 navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

それは良さそうで私にとってはうまくいきます

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

の例を参照してください Fiddle

— マキシムシュスティン
ソース
2
最もシンプルでエレガントなソリューション。ブートストラップとの下位互換性がないので、独自のcssコードを自家で醸造することにご注意ください
— 1-14x0r
私はこれを使用し、画面よりも短いページで古いアンドロイド（たぶんたぶん？）に問題がありました。それ以外の場合はFF、クロム、IE11、iPhone、ネクサス7の上にうまく機能
— bnieland
完璧で非常にシンプル！
— ramires.cabral 2017年
18

では、最新バージョンのブートストラップ4.3の、これは使用して行うことができる.fixed-bottomクラスを。 

<div class="fixed-bottom"></div>

フッターでの使用方法は次のとおりです。 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

詳細については、こちらの職務に関するドキュメントをご覧ください。

— モハメド・アリ・ジャマウイ
ソース
1
これはまだ解き放たれた公式の4バージョンで動作します。
— クレウィス
getbootstrap.com/docs/4.1/examples/sticky-footerの例では、フッター要素にline-height = 60pxスタイルがあることに注意してください。これは不要なだけでなく、フッターが1つまたは複数のdiv要素の親である場合に適切に機能しなくなります。これは一般的なケースです。
— ScottyB 2018
13

HenryWの答えは良いですが、思い通りに動作させるにはいくつかの調整が必要でした。特に、以下も処理します。

  • 最初にJavaScriptで非表示に設定し、表示を設定することで、ページ読み込み時の「ジャンプ」を回避します
  • ブラウザーを扱うことで適切にサイズ変更
  • さらに、ブラウザーが小さくなり、フッターがページより大きくなった場合に、フッターをページに戻す設定
  • 高さ関数の微調整

これらはそれらの微調整で私のために働いたものです：

HTML：

<div id="footer" class="invisible">My sweet footer</div>

CSS：

#footer {
    padding-bottom: 30px;
}

JavaScript：

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
— コーリー
ソース
11

これは完璧に機能しました。

このクラスnavbar-fixed-bottomをフッターに追加します。

<div class="footer navbar-fixed-bottom">

私はそれを次のように使用しました：

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

そしてそれは全幅にわたって底に設定されます。

編集：これにより、フッターが常に表示されるように設定されます。これは、考慮する必要があるものです。

— sp_omer
ソース
10

.container-fluidスティッキーフッターを機能させるには、div をラップする必要があります。また、.wrapperクラスの一部のプロパティが欠落しています。これを試して：

次のようにpadding-top:70px、bodyタグからを削除して、.container-fluid代わりにに含めます。

.wrapper > .container-fluid {
    padding-top: 70px;
}

これを行う必要があるのはbody、ナビゲーションバーに対応するために下に押すと、最終的にフッターがビューポートを少し超えて（さらに70px）押し出され、スクロールバーが表示されるためです。私たちはプッシュしてより良い結果を得ます.container-fluid代わりにdiv。

次に、次のように.wrapper、.container-fluiddivの外側のクラスを削除し、divでラップする必要があります#main。

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

もちろんフッターは.wrapperdivの外にある必要があるため、次のように `.wrapper divから削除して外側に配置します。

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

それがすべて終わったら.wrapper、次のように負のマージンを使用して、フッターをクラスに適切に押し込みます。

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

そして、それはうまくいくはずですが、.wrapperクラスの高さをリセットするなど、画面のサイズが変更されたときに機能するように、他のいくつかを変更する必要があるでしょう：

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— アンドレス・イリッヒ
ソース
9

これは、Twitter Bootstrapと新しいnavbar-fixed-bottomクラスでこれを行うための正しい方法です（これを探すのにどれだけの時間を費やしたかはわかりません）。

CSS：

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML：

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
— レジスB.
ソース
9

Bootstrap 4に組み込まれているflexユーティリティを使用してください！これが、Bootstrap 4ユーティリティのほとんどを使用して私が思いついたものです。

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex メインdivをフレックスコンテナーにする
  • .flex-column メインdivで、フレックスアイテムを列に配置します。
  • min-height: 100vh メインdivに、スタイル属性またはCSSで、ビューポートを垂直方向に塗りつぶします
  • .flex-grow-1 コンテナでは、メインコンテンツコンテナがビューポートの高さに残っているすべてのスペースを占めるようにする要素。
— EGhost57
ソース
Bootstrap min-height: 100vhのmin-vh-100クラスの代わりに 使用できます。
— イコヌク
このソリューションは、@ ikonukからのmin-vh-100の提案を含め、うまく機能しました
— TGR
4

navbarコンポーネントを使用して、.navbar-fixed-bottomクラスを追加します。

<div class="navbar navbar-fixed-bottom"></div>

ボディを追加 

  { padding-bottom: 70px; }
— 管理ファイル3
ソース
3

幅制約レイアウトを処理するには、以下を使用して、角が丸まらないようにし、ナビゲーションバーがアプリケーションの側面と面一になるようにします。

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

次に、cssを使用してブートストラップクラスをオーバーライドし、高さ、フォント、色を調整できます

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
— 1-14x0r
ソース
3

jQueryを使用してこれを処理できます。

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
— デュクオン
ソース
2

私のために働いた唯一のもの！：

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— リカルド
ソース
2

最も簡単な方法はnavbar-static-bottom、メインコンテナーのdivをheight: 100vh（新しいCSS3 ビューのポートパーセンテージ）に設定して、Bootstrapを使用することでしょう。これにより、フッターが一番下にフラッシュされます。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
— パンワンペラウォン
ソース
2

でテスト済みBootstrap 3.6.6。

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— ドゥシャンマシャール
ソース
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

フッターの高さは、折り返し要素の下のインデントのサイズと一致します。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— Sharpless512
ソース
1

Flexboxを使用したBootstrapの最新バージョン（執筆時点では4.3）のソリューションを次に示します。

HTML：

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

そして、コードペンの例：https ://codepen.io/tillytoby/pen/QPdomR

— トム・T
ソース
1

パーブートストラップ4.3たとえば、私が行ったように、あなたの正気を失っている場合には、これはそれが実際にどのように動作するかです：

  • フッターdivのすべての親にはheight: 100%（h-100クラス）
  • フッターの直接の親にはdisplay: flex（d-flexクラス）
  • フッターにはmargin-top: auto（mt-autoクラス）が必要です

問題は、最新のフロントエンドフレームワークでは、これらの要素の周りに追加のラッパーがあることが多いことです。

たとえば、私の場合、Angularを使用して、個別のアプリルート、メインアプリコンポーネント、フッターコンポーネントからビューを構成しました。これらすべてで、カスタム要素がDOMに追加されました。

そのため、機能させるために、これらのラッパー要素にクラスを追加する必要がありました：追加h-100、d-flex1レベル下に移動、mt-auto1レベル上にフッターから移動（実際には、フッタークラスではなく、<app-footer>カスタムにあります）素子）。

— MrValueType
ソース
私は入れていたclass="h-100"に<html>すぎタグ。
— Kel Solaar、
1

このコードをブートストラップで使用して動作します

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— Sanjay
ソース
1

Bootstrap v4 +ソリューション

これは、HTML構造や、パディングを含む追加のCSSトリックを再考する必要のないソリューションです。

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

このソリューションでは、フッターの高さがフレキシブルになることに注意してください。これは、複数の画面サイズのページをデザインするときに、コンテンツが折り返されて折り返される場合に特に便利です。

なぜこれが機能するのか

  • style="height:100%;" 作ります <html>タグは、文書の全体のスペースを取ります。
  • クラスd-flexはdisplay:flex私たちに設定します<body>タグに。
  • クラスflex-columnがタグに設定さflex-direction:columnれます<body>。その子（<header>、<main>、<footer>およびその他の直接の子は）今縦に並んでいます。
  • クラスh-100はタグに設定さheight:100%れます<body>。つまり、画面全体を垂直方向にカバーします。
  • クラスがにflex-grow-1設定さflex-grow:1れ、<main>残りの垂直方向のスペースを埋めるように効果的に指示されます<body>。これにより、タグに設定した垂直方向の高さが100％になります。

ここで作業デモ：https : //codepen.io/maxencemaire/pen/VwvyRQB

flexboxの詳細については、https： //css-tricks.com/snippets/css/a-guide-to-flexbox/を参照してください。

— カサンドラックス
ソース
h-100クラスが正しく機能しないため、を使用することをお勧めしますmin-vh-100。
— イコヌク
@ikonuk「正しく動作しない」とはどういう意味ですか？詳しく説明してください。
— Kathandrax
そのためh-100、クラスは常に親要素の高さに依存し、適切にいくつかのケースでは動作しない場合があります。ビューポートの下部にフッターが必要なため、ビューポートの高さを使用することをお勧めします。
— 21:09のikonuk
繰り返しますが、「いくつかのケース」を定義します。親の依存関係についてのあなたの議論はちょうど同じように適用されますmin-widthます。これが、HTMLタグがheightコード内で100％である理由です。この例は機能しますが、CSS heightプロパティのクロスブラウザーサポートが提供されない理由はわかりません。これが、最終的にBootstrapスニペットに変換されます。
— Kathandrax
あなたの例が機能しないとは言わなかった。誰もがスタイルを使用するわけではありませんHTMLタグで。私の場合、HTMLタグでスタイルを使用したくないので、ソリューションは機能しませんでした。そして、私はbodyタグがビューポートではなく別の親に依存することを望んでいません。あなたは配置する必要はありませんstyle="height:100%;"とh-100同時に。min-vh-100ボディに置くことは単に仕事をし、コードを減らします。
— ikonuk
0

それはのように見えるheight:100%で破断されている「チェーン」div#main。height:100%それに追加してみてください。そうすれば、目標に近づく可能性があります。

— 脳911
ソース
0

ここに、HAML（http://haml.info）でのアプローチを示します。上部にnavbarがあり、ページの下部にフッターがあります。

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— ハネス
ソース
答えをもう少し詳しく説明してもらえますか？通常、コードのみの回答はお勧めしません。
— Qix-モニカは2014年
1
さて、あなたは何を知りたいですか？
— Hannes
私はそれを知る必要はありませんが、後でこのサイトにアクセスする誰かが、あなたの答えのコードがなぜそれを行うのか正確に知らないかもしれません。
— Qix-モニカは2014年
たぶん私はそれを削除すべきです。新しいイントロを書きました。:)
— ハネス2014年
0

単純にする。

footer {
  bottom: 0;
  position: absolute;
}

にmargin-bottomフッターの高さに相当するものを追加して、フッターの高さをオフセットする必要がある場合もありbodyます。

— obfk
ソース
0

次に、css3を使用した例を示します。

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

バイオリン

— ビクター
ソース
0

メディアクエリのみを使用した別の可能なソリューション

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
— GeorgeWL
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.