ブートストラップカルーセルが私のフッタを中央に表示します

Question

ブートストラップカルーセルを持つページにフッタを表示しようとすると、フッタはページの最下部には表示されません。

カルーセルを取り外すと、フッターが下部に移動します。

私の基本的なフッタは次のとおりです。ここ

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

参照のデモ：http://jsfiddle.net/2d4wn1aw/1/

いずれかが理由を知っていますか？

ありがとうございます。除去

Answer 1

試行全て<br> &を.footer

EDITED: See Fiddle

For sticky-footer check here:

スティッキーフッターにrelative;にposition:を切り替えるものは基本的にmin-height: 100%とフッタとして負margin-bottom（同じ高さを持つすべてのコンテンツをラップdivでありますしかし、否定的）、divがこの内にありますwrapperpushの空白スペースはfooterと同じheightとなり、そのために余裕があり（footer）、これはラッパーの外に出ます。

In case of interest, also a Flexbox sticky-footer example:

Answer 2

まず、あなたはposition:relative;でラッパーを追加する必要があり、その後ここでは、それらの<br> を削除する例です：http://jsfiddle.net/Lgs1L673/1/

Answer 3

あなただけに持って.footerでposition: absoluteを削除するかposition: relative少なくともの変化、それを

Answer 4

position: absoluteプロパティ.footerで、フッターが要素のフローから削除されます。この属性を削除すると、フッターはDOM内の位置を尊重します（HTMLの最後に配置されているので、ページ上の最後のコンテンツになります）。

Answer 5

position:relative 

は、カルーセルに設定されたとフッターはフッターがカルーセルするとbottom:0とあなたはそれが無料になりますフッターから絶対位置を取り外し、そのフッターはカルーセル直後になります言っている関連していることを意味しposition:absoluteを持っており、あなたが使用することができていますposition:relative代わりに、

/* for testing only */ 
 
.item img {width: 100%; height: auto} 
 
.carousel, 
 
.item { 
 
    height: 100%; 
 
} 
 

 
.carousel-inner { 
 
    height: 100%; 
 
} 
 
.carousel-indicators li { 
 
    padding:5px; 
 
    
 
    background-color: #999; 
 
} 
 

 
.carousel-indicators .active { 
 
    background-color: #444; 
 
} 
 

 
.fill { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
.footer { 
 
    position: relative; 
 
    bottom: 0; 
 
    width: 100%; 
 
    /* Set the fixed height of the footer here */ 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/450x350" alt="Slide 1"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 1 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/450x350" alt="Slide 2"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 2 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/450x350" alt="Slide 3"> 
 
     <div class="carousel-caption"> 
 
     Caption Slide 3 
 
     </div> 
 
    </div>   
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
     <footer class="footer">Blablabla 
 
     </footer> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>