頁腳不停留下來

Question

夥計們。 我試圖把頁腳放在屏幕的底部，我成功地這樣做了，但事情是 - 如果頁面是可滾動的，一旦向上滾動，頁腳就會「隨」走。或者讓我說我打開開發人員工具調試，頁腳就會「繼續」，而不是停留在頁面上。 我希望頁腳始終保持在最低點。即使頁面變小，我也不想看到它，除非我在頁面的底部（滾動明瞭）。 我該如何實現？

謝謝！

Answer 1

您好，你可以嘗試以下方法：

HTML

<div class="page-wrap"> 

    Content! 

</div> 

<footer class="site-footer"> 
    I'm the Sticky Footer. 
</footer> 

CSS

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.page-wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -142px; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
} 
.site-footer, .page-wrap:after { 
    height: 142px; 
} 
.site-footer { 
    background: orange; 
}