web-dev-qa-db-ja.com

ページの下部にフッターを流す、Twitterのブートストラップ

私は一般的にcssを使ってフッターをフラッシュするテクニックに精通しています。

しかし、私はこの方法をTwitterのブートストラップでうまく機能させるのに問題を抱えています。Twitterのブートストラップは本質的に応答性が高いためです。 Twitterのブートストラップを使用する上記のブログ記事で説明されているアプローチを使用してフッターをページの一番下までフラッシュさせることはできません。

csstwitter-bootstrapfooter
271
Calvin Cheng

スニペットを見つけました ここ ブートストラップには本当にうまくいきます

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;
}

出典： デモ および チュートリアル （使用できなくなりました; _ rip _ ）

304
Chuan Yeong

これは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

434
sanon

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>

#footerを持つ要素が少なくとも必要です

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

72
HenryW

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

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;
    }
}
33
Leniel Maccaferri

スティッキーフッター HTMLの基本的な スティッキーフッター には2つのDIV'sを使います。このように書く：

_ html _ 

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

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

_ css _ 

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
31
sandeep

もっと簡単な公式例： http://getbootstrap.com/examples/sticky-footer-navbar/ /

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
28
user

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>

それはよさそうだし、私のために働く

enter image description here

の例を参照 Fiddle

18
Maxim Shoustin

これは私にとっては完璧に機能しました。

このクラスnavbar-fixed-bottomをフッターに追加してください。

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

私はこのように使った：

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

そしてそれは全幅に渡って下に設定されます。

編集：これはフッターを常に見えるように設定します、それはあなたが考慮する必要があるものです。

11
sp_omer

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;
});
10
Cory

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

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

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

ナビゲーションバーを収めるためにbodyを押し下げると、ビューポートを超えてフッターがさらに（70px）押し上がるため、スクロールバーが表示されます。代わりに.container-fluid divをプッシュすることでより良い結果が得られます。

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

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

もちろん、あなたのフッターは.wrapper divから外れていなければならないので、それを `.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;
   }
}
10
Andres Ilich

これは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>
9
Régis B.

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

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

フッターと一緒に使う方法は次のとおりです。

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

あなたはより多くの情報を見つけることができます position documentation ここ 。

8
MedAli

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

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

ボディを追加

  { padding-bottom: 70px; }
4
Admin File3

幅の制約レイアウトを処理するには、角が丸くならないように、またナビゲーションバーがアプリケーションの側面と同じ高さになるように次のようにします。

<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;
    }
3
1-14x0r

これを処理するために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
DucCuong

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;
}
2
Dušan Maďar

最も簡単な方法は、おそらくメインコンテナのdivにnavbar-static-bottomを設定してBootstrap height: 100vhを使うことです（新しいCSS3 ビューポートの割合 ）。これはフッターを一番下までフラッシュします。

<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
Pan Wangperawong

Bootstrap 4.3の例 に従って、あなたが私のように正気を失っている場合、これは実際にどのように機能するかです：

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

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

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

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

1
MrValueType

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

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
1
Ricardo

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>
  • main divをフレックスコンテナにするための.d-flex
  • フレックスアイテムを列に配置するためのmain divの.flex-column
  • ビューポートを垂直方向に埋めるために、style属性を使用するか、CSS内でmain divにmin-height: 100vhを指定します。
  • メインコンテンツコンテナにビューポートの高さに残っているスペースをすべて使用させるには、container要素の.flex-grow-1。
1
EGhost57
#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;
}

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

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

複雑にしないでおく。

footer {
  bottom: 0;
  position: absolute;
}

フッターの高さに相当するmargin-bottomをbodyに追加することによって、フッターの高さもオフセットする必要があるかもしれません。

0
obfk

これが、ブートストラップによる方法です。

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

単にページのソースを使うと見ることができるはずです。 <div id="wrap">とthe topを忘れないでください。

0
Bren

これは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
Victor

ここにあなたはHAML（ http://haml.info ）のアプローチを見つけるでしょう。

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
0
Hannes

下のクラスを使用してページの最後の行にプッシュし、それを中央に配置します。 Ruby on RailsのHAMLページを使用している場合は、以下のコードを使用できます。 %footer.card.text-center

PlsはTwitterのブートストラップの使用を忘れないでください

0
Remember Why You Started

これは、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;
}

そしてcodepenの例： https://codepen.io/tillytoby/pen/QPdomR

0
Tom T

メディアクエリを使用するだけの、もう1つの解決策

@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;
    }
}
0
GeorgeWL

height:100%のチェーンがdiv#mainで壊れているようです。それにheight:100%を追加してみてください。そうすれば、あなたはあなたのゴールに近づくでしょう。

0
brains911