粘性頁腳底部不重疊

我想讓頁腳粘貼到頁面底部。如果內容很小，頁腳應該位於瀏覽器的底部。內容和頁腳之間的空白應該是空的。粘性頁腳底部不重疊

我已經嘗試了各種方法，但頁腳仍然直接在內容下面，而不是在瀏覽器的底部。

這裏是我的代碼

<div id="content">   
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p>      
      </div> 
     </div> 
    </a> 
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p> 
      </div> 
     </div> 
    </a> 
</div> 
<footer class="bar bar-tab">   
    <a class="tab-item" href="#"> 
     Home 
    </a> 
</footer>

CSS：

#content{ 
    min-height: 100%; 
} 
footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0; 
}

來源

2016-09-14 Ricky Spanish

[問題與CSS粘頁腳]的可能的複製（http://stackoverflow.com/questions/3906065/problems-with-css-sticky-footer） – Christoph

古典 - > http://ryanfait.com/sticky-footer/ –

如果我明白你想要什麼，你需要使你的頁腳位置：fixed;並添加填充底部到您的容器。

身體會坐在頁腳後面，因此您需要的填充略大於頁腳高度。

https://jsfiddle.net/c0Lrcg4s/

#content{ 
    min-height: 100%; 
    padding-bottom:60px; 
} 
footer{ 
    height: 50px; 
    position: fixed; 
    bottom: 0; 
}

你可以使用的位置是：絕對的;但是，這不會正確工作，因爲它的相對容器將是視口，然後將隨屏幕一起滾動。

來源

2016-09-14 08:41:57 Tom

非常感謝！但是當內容越大，頁腳就越過內容。 –

添加了一個清晰的，不，它的工作。 –

確保將填充底部添加到內容的最外層包裝中。 – Tom

試着改變你的CSS頁腳是absolute定位：

footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0 
}

Codepen演示：http://codepen.io/anon/pen/NRxQQP

來源

2016-09-14 08:41:30

你可以用jQuery來做到這一點，因爲你需要「窗口」的高度。在jQuery中，你可以這樣寫：

var height = $(window).height(); 
$("#content-wrapper").css({height : height});

當然，你也可以降低高度，頁腳和頁眉的高度，所以你會看到頁腳當你打開頁面。

獲得此高度變量的最佳方法是在.resize（）fincton中。

然後在CSS中，您可以設置：

#content-wrapper{ 
position:relative; 
} 
.footer{ 
position: absolute; 
bottom: 0; 
}

.footer和＃內容應該是＃內容包裝

來源

2016-09-14 08:47:15

內，如果你的頁腳位置設置爲固定它會留在同一使用top和left屬性修復它的位置。

footer{ 
    height: 50px; 
    **position: fixed;** 
    bottom: 0; 
}

來源

2016-09-14 08:50:13

粘性頁腳底部不重疊

回答

相關問題