web-dev-qa-db-ja.com

Bootstrap 3フッターを一番下までフラッシュします。未修理

設計中のサイトにBootstrap 3を使用しています。

このサンプルのようなフッターが欲しいのですが。 サンプル

ブートストラップnavbar-fixed-bottomが私の問題を解決しないので、私はそれを修正したくないことに注意してください。私はそれが常にコンテンツの一番下にあり、また反応がよいことを望みます。

どんなガイドでも大いに評価されるでしょう。

編集：

よくわからなかった場合は申し訳ありません。今起きていることは、コンテンツ本体に十分なコンテンツがない場合です。私のフッターは上に移動し、それからそれは下部に空のスペースを残します。

これは私が今私のナビゲーションバーに持っているものです

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
htmlcsstwitter-bootstrapfooter
167
user3169403

下記の例をご覧ください。これにより、ページの内容が少ない場合はフッターが一番下に固定され、ページの内容が多い場合は通常のフッターのように動作します。

_ css _ 

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .Push {
    height: 155px; /* .Push must be the same height as .footer */
}

_ html _ 

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="Push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

_ update _ ：Bootstrapの新バージョンは、ラッパーを追加せずにスティッキーフッターを追加する方法を示しています。詳細はJboy Flaga's Answerをご覧ください。

120
Surjith S M

ここにブートストラップからの簡単な解決策があります（新しいクラスを作成する必要はありません）： http://getbootstrap.com/examples/sticky-footer-navbar/

そのページを開いたら、ブラウザを右クリックして[ソースの表示]をクリックし、sticky-footer-navbar.cssファイルを開きます（ http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer- navbar.css ）

あなたはこの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;
}

このHTML用

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
302
Jboy Flaga

更新：これは質問全体に直接答えるものではありませんが、他の人がこれを役に立つと思うかもしれません。

これはレスポンシブフッターのHTMLです

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

CSSのために

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

注： この質問の投稿時には、上記のコード行はページコンテンツの下にフッターをプッシュしません。ただし、ページにコンテンツがほとんどない場合は、フッターがページの途中でクロールされないようにするためです。ページコンテンツの下にフッターをプッシュする例については、こちらをご覧ください http://getbootstrap.com/examples/sticky-footer/

12
Rex CoolCode Charles

あなたがあなたの処分でそれを使用することができるようにflexboxを使用してください。 Bootstrap 4が提供するソリューションは、レスポンシブレイアウトでオーバーラップコンテンツをまだ探し続けています。例えば、モバイルビューではうまくいきません。ここで示されているflexboxソリューションのデモを使用するのが一番です：（ https：//philipwalton.github .io/flex-by-flexbox/demos/sticky-footer/ ）この方法では、今では時代遅れの解決策である固定高の問題に対処する必要はありません...この解決策は、ブートストラップ3と4のどちらでも問題ありません。使用しています。

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

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

.Site-content {
  flex: 1;
}
10
Christopher Tan

まだ苦労していて答えられた解決策が期待通りに動作しない場合は、ここに私が見つけた最も簡単な解決策があります。

メインコンテンツをラップして、ビューの高さを最小にします。あなたのスタイルが必要とするどんな値でも60を調整してください。

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

それはそれだとそれはかなりうまくいきます。

7
eGlu

Galen Gidmanは、高さが固定されていないレスポンシブなスティッキーフッターの問題に対する非常に優れたソリューションを投稿しました。彼の完全なソリューションは彼のブログで見つけることができます： http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
5
weiy

このメソッドは最小限のマークアップを使用します。すべてのコンテンツを、フッターの高さ（私の例では100px）に等しいパディングボトムと負のマージンボトムを持つ.wrapperに入れるだけです。

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
3
Vin

上記のソリューションの主な欠点は、フッターの固定高さを持っていることです。
そして、それは現実の世界ではそれをカットしません。人々は無数のデバイスを使用し、予想以上にローテーションするというこの悪い習慣があり、** Poof ！**ページコンテンツはフッターの後ろにあります！

実際には、フッターの高さを計算し、その高さに合わせてページコンテンツのpadding-bottomを動的に調整する関数が必要です。そして、この小さな関数をページloadおよびresizeイベントとフッターのDOMSubtreeModifiedで実行する必要があります（フッターが動的に非同期に更新されたり、サイズを変更するアニメーション要素が含まれる場合にと対話したとき）。

JQuery v3.0.0およびBootstrap v4-alphaを使用した概念実証がありますが、それぞれの下位バージョンで動作しない理由はありません。

jQuery(document).ready(function( $ ) {
  $.fn.accomodateFooter = function(){
    var footerHeight = $('footer').outerHeight();
    $(this).css({'padding-bottom':footerHeight+'px'});
  }
  // accomodate footer after its html has changed
  $('footer').on('DOMSubtreeModified', function(){
    $('body').accomodateFooter();
  })
  // accomodate footer on page load and resize
  $(window).on('load resize', function(){
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />',{
      text:"Human give me attention meow flop over Sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow Sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
    .append($('<hr />'));
  }
});
body {
  min-height: 100vh;
  position: relative;
  padding-top: 54px;
}
footer {
  background-color: rgba(0,0,0,.65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}
footer hr {
  border-top: 1px solid rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.21);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
      </div>
    </div>
<footer>I am a footer with dynamic content.
  <hr />

最初に、このソリューションを投稿しました here ですが、この質問の下に投稿すれば、より多くの人に役立つかもしれないことに気付きました。

注：$([selector]).accomodateFooter()をjQueryプラグインとして意図的にラップしているため、ほとんどのレイアウトのように、DOM要素で実行できます。調整が必要な$('body')のbottom-paddingではなく、position:relative（通常はfooterの直接の親）を持つ一部のページラッパー要素です。

2
Andrei Gheorghiu

ブートストラップの場合：

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
2
shilovk

それともこれ

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
2
Annjawn

私は自分のフッターにnavbar-inverseクラスを使用していたので、これらの解決策はどれも私にとって完全にはうまくいきませんでした。しかし、私はうまくいった、Javascriptフリーのソリューションを手に入れました。 Chromeを使用してメディアクエリを作成しました。フッターの高さは画面のサイズが変わるにつれて変わりますので、それに注意を払い、それに応じて調整する必要があります。あなたのフッターコンテンツ（私のコンテンツを定義するためにid = "footer"を設定します）はそれを一番下に保つためにpostion = absoluteとbottom = 0を使うべきです。また幅：100％。これが私のCSSとメディアクエリです。最小幅と最大幅を調整し、いくつかの要素を追加または削除する必要があります。

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
1
Brian Edwards