頁腳總是在內容的底部，如果視口底部沒有足夠的內容

Question

我閱讀了大部分爲此提出的問題，但它們似乎並不奏效。這兩個特別看起來是我以前的樣子，但我不希望頁腳固定在視口的底部。

How to keep footer always at the bottom of a page?

How to keep always at the bottom of page,(not screen) in html5

這是我的HTML。我建立在Laravel 5.3之刃模板引擎，但使用引導：

.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    border-top: 1px solid #d3e0e9; 
 
    overflow: auto; 
 
    padding: 5px 0 5px 0; 
 
    p { 
 
    margin: 0px; 
 
    } 
 
}

<footer class="footer"> 
 
    <div class="container"> 
 
    <p>Stuff</p> 
 
    </div> 
 
</footer>

編輯：試圖澄清什麼，我問在這裏，也除去上述改變視口大小的引用。這是造成混亂的原因，最終與我所要求的無關。

可以暫時將fixed從表格中取出，因爲這不會是一個解決方案：我並不總是希望頁腳位於視口的底部而不管內容。

假設視口始終處於桌面上的全屏狀態。

假設第一頁上的內容非常少，並且內容下面有一個頁腳。

Relative在頁腳的底部和視口的底部邊緣之間留下了一個醜陋的空隙。

Absolute把它放在底部邊界上。這對於內容很少的頁面來說似乎是正確的選擇。

現在假定一個頁面具有相同的頁腳，但是在瀏覽器中有幾頁滾動頁面的內容很多。

Absolute（至少在我使用它時）傾向於停留在視口的底部而不在內容的下面。

Relative將把它放在內容的下面，並將成爲這個問題的解決方案。

但現在它不適用於內容很少的頁面。

看來我需要這兩者的混合，但唯一想到的就是使用JQuery，測試內容是否通過了視口的底部邊緣。如果確實如此，則將CSS從默認絕對值更改爲相對值。

似乎會有一個更簡單的方法來完成這與只是CSS。

Answer 1

https://jsfiddle.net/jxg3c6ue/

如果使用相對絕對位置關係。但我不會建議這種編程方式。媒體查詢是最適合您的項目的。但是，我只是回答如何以其他方式完成。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, html { 
 
    position: relative; 
 
    min-height: 100vh; 
 
    padding-bottom: 18px; 
 
    box-sizing: border-box; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    background: red; 
 
}

<div class="body"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p> 
 
    <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p> 
 
    <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p> 
 
    <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p> 
 
    <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p> 
 
    <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p> 
 
    <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p> 
 
    <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p> 
 
    <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p> 
 
    <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p> 
 
    <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p> 
 
    <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p> 
 
    <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p> 
 
</div> 
 

 
<footer> 
 
    this is a footer 
 
</footer>

沒有內容

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, html { 
 
    position: relative; 
 
    min-height: 100vh; 
 
    padding-bottom: 18px; 
 
    box-sizing: border-box; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    background: red; 
 
}

<div class="body"> 
 
    
 
</div> 
 

 
<footer> 
 
    this is a footer 
 
</footer>

Answer 2

有絕對和固定定位之間的一些差別好。你一定要谷歌瞭解更好。同時簡而言之，絕對定位分別完成父親相對/絕對位置。

我不清楚問題，因爲工資太低而無法閱讀。希望你看起來像。頁腳始終保持在視口底部。

.viewFooter{ 
 
    background:#ddd; 
 
    color:#3d3d3d; 
 
    position:fixed; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    font-size:16px; 
 
    text-align:center; 
 
    padding:10px 
 
} 
 
body{ 
 
    margin:0; 
 
    height:calc(1000px - 40px); 
 
    position:relative 
 
}

<div class="viewFooter"> 
 
    This will be positioned at the bottom of the view Port 
 
</div>

頁腳住在視

底部

.pageFooter{ 
 
    background:#ddd; 
 
    color:#3d3d3d; 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    font-size:16px; 
 
    text-align:center; 
 
    padding:10px 
 
} 
 
body{ 
 
    margin:0; 
 
    height:1000px; 
 
    position:relative 
 
}

<div class="pageFooter"> 
 
    This will be positioned at the bottom of the page 
 
</div>

如果你想在不同的視絕對和固定位置之間進行切換。使用媒體查詢。上面給出的將切換到絕對定位在移動設備

.viewFooter{ 
 
    background:#ddd; 
 
    color:#3d3d3d; 
 
    position:fixed; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    font-size:16px; 
 
    text-align:center; 
 
    padding:10px 
 
} 
 
body{ 
 
    margin:0; 
 
    height:1000px; 
 
    position:relative 
 
} 
 
@media only screen 
 
    and (max-width: 600px) { 
 
    .viewFooter{ 
 
     position:absolute; 
 
    } 
 
    }

<div class="viewFooter"> 
 
    This will be positioned at the bottom of the view Port 
 
</div>

確保頁腳的div被直接附加到身體標記。