web-dev-qa-db-ja.com

Twitter Bootstrapを使用してフッターをページの下部に貼り付ける

コンテンツの少ないWebページがいくつかあり、フッターはページの中央にありますが、下部に配置したいです。

すべてのページを「ホルダー」に入れました

#holder {
  min-height: 100%;
  position:relative;
}

そして、フッターに次のCSSを使用しました

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

フッターのhtml

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:[email protected]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

フッターを流動的に保ちたいです。

csstwitter-bootstrap
70
Richlewis

コメントで説明したように、このソリューションに基づいてコードを作成しました： https://stackoverflow.com/a/8825714/681807

このソリューションの重要な部分の1つは、height: 100%をhtml, bodyに追加して、#footer要素が動作する基本の高さを持つようにすることです。これはコードにはありません。

html,body{
    height: 100%
}

また、bottom: -50pxを使用すると問題が発生することがわかります。これにより、コンテンツが多くないときにコンテンツをフォールドの下にプッシュします。 margin-bottom: 50pxの前の最後の要素に#footerを追加する必要があります。

39
My Head Hurts

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

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

http://bootstrapfooter.codeplex.com/

これで問題が解決するはずです。

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</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;
color:#fff;
}
8
easwee

次に、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>

フィドル

6
Victor

bootstrapクラスを使用してください。 navbar-static-bottomは下部に残します。

<div class="navbar-static-bottom" id="footer"></div>
6
Coding Enthusiast

上記のソリューションのほとんどは私にとってはうまくいきませんでした。ただし、以下のソリューションは問題なく機能します。

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

ソース

6
BlackBeard

CSS flexで簡単に実現できます。次のようなHTMLマークアップを使用します。

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

次のCSSを使用する必要があります。

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

ここで遊ぶCodePenは次のとおりです。 https://codepen.io/webdevchars/pen/GPBqWZ

0
Damian Czapiewski