[英]stick footer at the bottom of the page
請在Firefox中查看此網站:
http://www.imageworkz.asia/microtel
頁腳不會像stackoverflow的頁腳那樣停留在頁面底部。 我嘗試了一些參考站點中所示的幾種技術,但是仍然沒有運氣。
我需要一些CSS專家來幫助我解決這個問題。 謝謝!
有一些母馬方法可以使頁腳變粘。 固定高度的頁腳的基本技巧
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 150px; /* .push must be the same height as .footer */
}
要么
您可以檢查標題為“粘性頁腳”的這篇文章 (以及許多其他文章)
添加position:fixed; bottom:0; left:0
position:fixed; bottom:0; left:0
將position:fixed; bottom:0; left:0
到頁腳,它將固定到位。 如果您隨后添加#container {padding-bottom:120px}
(或該數字附近的內容),則在查看頁面底部時,頁腳將不會隱藏您的內容
將其固定位置設置為底部0
值:
footer {
position: fixed;
bottom: 0;
}
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.