Question

我使用粘性页脚jquery解决方案让我的页脚始终位于页面底部。有用。因此，当我使用浏览器以全屏模式加载页面时，页脚位于底部，当我调整浏览器大小时，页脚不会移动并覆盖我想要的内容。但是，如果已经使用较小的分辨率调整了浏览器的大小，则页脚会显示并覆盖内容。我怎样才能阻止这种情况发生？

http://oi41.tinypic.com/1626x52.jpg

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/

需要帮助让我的页脚做我想做的事情

1 个答案: