如何創建始終可見的頁腳？

Question

我試圖創建一個粘腳，但它不工作。我想頁腳始終可見無論身在何處，用戶已經在我的網頁上滾動

I want the version on the left, I'm getting the right however

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

Answer 1

footer { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

你必須使用固定，而不是絕對。 檢查此鏈接W3Schools，它會幫助你。

Answer 2

試試這個：

位置：固定

https://jsfiddle.net/pablodarde/gyszqx99/

HTML

<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie placerat ligula. Vivamus tempus mauris enim, pellentesque vehicula augue bibendum vel. Phasellus et ultrices risus, maximus posuere sapien. Vestibulum et condimentum nisl, sed facilisis turpis. Vivamus suscipit ultricies lorem et imperdiet. Aliquam ut semper ante, nec aliquet arcu. Phasellus ut magna et dolor hendrerit pulvinar sed vitae erat. Morbi ultrices tristique tristique. Donec sed condimentum risus. Nullam volutpat quam dolor, quis tempor massa ultricies non. Vivamus bibendum dapibus vehicula. Nunc molestie risus in orci lacinia dapibus.</p> 
</div> 
<div class="footer"> 
    This is the footer 
</div> 

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
.content { 
    width: 100%; 
    height: 2000px; 
    background: #f0f; 
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 80px; 
    background: #090; 
    color: #fff; 
}