1

我使用了粘性页脚 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;
}
4

1 回答 1

2

position:"fixed";bottom:0我不是 100% 确定这是您想要的确切功能，但看起来您想要使用position:relative.

试试这段代码，看看它的行为是否符合您的预期。 http://jsfiddle.net/Rv6p5/1/

编辑：修复了一个小错误，以更好地考虑页脚的高度。还增加了页脚的大小来展示这些变化。http://jsfiddle.net/Rv6p5/3/

于 2013-04-26T04:44:15.930 回答