Bootstrap旋轉木馬讓我的頁腳顯示在中間

Question

如果我嘗試在具有Bootstrap旋轉木馬的頁面上顯示頁腳，頁腳不會移到頁面的底部。

如果我刪除了傳送帶，頁腳就會到達底部。

我的基本頁腳：

.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> &切換position:到relative;上.footer

EDITED: See Fiddle

For sticky-footer check here:

置頂頁腳基本上是一個div它包裝與min-height: 100%和負margin-bottom（相同的高度頁腳的所有內容但是負面的），然後再div這個wrapper將push作爲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

你只需要刪除position: absolute在.footer或至少將其更改爲position: relative

Answer 4

The position: absolute property在.footer導致頁腳被從元素流中移除。通過去除這個屬性，你的頁腳將尊重它在DOM中的位置（你在HTML的末尾有它，因此它將成爲頁面上的最後一段內容）。

Answer 5

position:relative 

設置在轉盤和頁腳具有position:absolute這意味着，頁腳爲輪轉，並與bottom:0你說的轉盤後軀將直接，剝離位置絕對從頁腳將使其自由相關的，你可以使用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>