如何在頁面底部保留頁腳

Question

我收到了很多，但仍然沒有定位我的頁腳。我正在嘗試將頁腳放置在頁面的底部，並且只有在滾動到底部時纔可見。

我已經加入瞭如下因素類頁：

<div class="wrap"> 

<!-- Holds all the page content inside --> 

<div class="spacer"></div> 
</div> 

<div class="footer"> 
..... 
</div> 

我已經加入瞭如下因素的CSS類：

.wrap { 
min-height: 100%; 
margin-bottom: -100px; 
    padding:5%; 
} 

/* Set the fixed height of the footer here */ 
.footer { 
    position: relative; 
    background-color: #222; 
    z-index: 1; 
} 

.spacer, #footer { 
    height: 100px; 
} 

我在做什麼錯誤，防止頁腳留總是在底部？

Answer 1

一下添加到頁腳類

position: relative; 
bottom: 0; 
margin: 20px 0 0 0; 
width: 100%; 

這將頁腳保持在底部

<div class="footer"> 
Your content 
</div> 

Answer 2

將您的頁腳設置爲absolute並將bottom: 0添加到您的頁腳類。

.footer { 
    ... 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

Answer 3

更優雅的解決方案會是這樣

html, body{ 
 
margin: 0;padding:0; 
 
} 
 
.fake-body{ 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 
.wrap { 
 
position:relative; 
 
} 
 

 
/* Set the fixed height of the footer here */ 
 
.footer { 
 
    position: absolute; 
 
    background-color: #222; 
 
    z-index: 1; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    color:white; 
 
} 
 

 
.spacer, #footer { 
 
    height: 300px; 
 
}

<div class="fake-body"> 
 
<div class="wrap"> 
 

 
<div class="spacer">spacer</div> 
 

 
<div class="footer">footer</div> 
 
    
 
</div> 
 
</div>