333

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

しかし、おそらく Twitter ブートストラップはレスポンシブであるという事実が原因で、このアプローチを Twitter ブートストラップで機能させるのに苦労しています。Twitter ブートストラップを使用すると、上記のブログ投稿で説明されている方法を使用してフッターをページの下部にフラッシュすることができません。

4

35 に答える 35

502

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

于 2012-11-13T17:26:36.723 に答える
330

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

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;
}
于 2012-10-03T02:13:52.057 に答える
85

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>

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

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

少なくとも 1 つの要素が必要です。#footer

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

于 2014-01-07T12:17:27.487 に答える
38

スティッキーフッターの場合、基本的なスティッキーフッター効果DIV'sのためにHTMLで2つを使用します。このように書いてください：

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
于 2012-04-11T03:39:27.093 に答える
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;
    }
}
于 2013-01-30T02:18:20.320 に答える
32

より単純な公式の例: 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;
}
于 2015-02-25T07:18:44.883 に答える
12

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

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

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

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

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

そして、全幅にわたって底にセットします。

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

于 2016-11-16T14:34:57.053 に答える
10

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

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

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

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

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

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

もちろん、フッターは div の外にある必要がある.wrapperため、`.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;
   }
}
于 2012-04-11T14:17:21.893 に答える
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>
于 2013-02-06T18:09:18.157 に答える
4

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

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

ボディを追加

  { padding-bottom: 70px; }
于 2016-02-23T08:47:34.133 に答える
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();
    });
});
于 2014-06-18T06:32:04.723 に答える
2

私のために働いた唯一のもの!:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2015-04-17T20:38:10.573 に答える
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>
于 2020-04-20T10:25:23.207 に答える
0

height:100%'チェーン'がで壊れているようdiv#mainです。それに追加height:100%してみてください、そしてそれはあなたをあなたの目標に近づけるかもしれません。

于 2012-04-11T07:55:37.440 に答える
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>

フィドル

于 2014-10-10T17:41:21.100 に答える
0

ここでは、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
于 2012-12-02T22:59:52.250 に答える
0

これがブートストラップの方法です。

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

ページソースを使用するだけで、表示できるはずです。<div id="wrap">トップを忘れないでください。

于 2015-01-05T23:16:52.023 に答える
0

これはうまくいきます

html

<footer></footer>

CSS

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2020-02-16T15:43:48.610 に答える
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;
    }
}
于 2016-05-09T10:59:01.843 に答える
-1

これは最高です！

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2019-10-15T05:33:36.650 に答える