需要幫助讓我的頁腳做我想做的事情

Question

我使用了粘性頁腳jQuery解決方案，使頁腳始終位於頁面底部。 有用。 因此，當我以全屏模式在瀏覽器中加載頁面時，頁腳位於底部，而當我調整瀏覽器的大小時，頁腳不會移動並掩蓋我想要的內容。 但是，如果已經以較小的分辨率調整了瀏覽器的大小，則頁腳會顯示並覆蓋內容。 我該如何阻止這種情況的發生？

jQuery的：

<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');
    }
});

// -->

頁腳規則

#footer {
bottom:0;
background-color:#000000;
height: 130px;
width: 100%;
clear:both;
}

Answer 1

我不是100％肯定這是您想要的確切功能，但看起來您想使用position:"fixed";bottom:0和通常position:relative 。

嘗試下面的代碼，看看它是否符合您的期望。 http://jsfiddle.net/Rv6p5/1/

編輯：修復了一個小錯誤，以更好地考慮頁腳的高度。 還增加了頁腳的大小，以演示這些更改。 http://jsfiddle.net/Rv6p5/3/