-1

如何制作一个会粘在页面底部并随我的内容移动的页脚？我尝试使用position，但是当内容超出屏幕大小时，页脚停留在屏幕底部，内容覆盖在其顶部。

4

4 回答 4

0

我会为页脚制作 css 类 -

footer.bottom {
    position: fixed;
    bottom: 0px;
}

比使用 jQuery

if ( $(document).height() < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}

所以如果 body 比 window 短，它会添加 class 使其粘在底部，但如果 body 更高，那就正常了。

于 2013-11-07T09:15:57.753 回答
0

我想你正在使用 div 来制作页脚。您是否尝试过z-indexCSS 属性？较大z-index会导致元素出现在前面。

只是一个尝试的建议。

于 2013-11-07T09:36:55.277 回答
0

这种方法解决了我的问题。我认为它应该解决所有与粘性页脚相关的问题。谢谢大家回答我的问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
footer.bottom {
    position: fixed;
    bottom: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ( $('#x')[0].scrollHeight < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}
});
</script>
</head>
<body>
<div id="x">
<table height="1000" bgcolor="#999999">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

    <footer>
    Lorem Ipsum
    </footer>

</div>
</body>
</html>
于 2014-01-17T06:04:23.453 回答
-1

如果您使用：

position:fixed;
bottom:0px;

应该这样做

如果width:100%;你需要它。

于 2013-11-07T09:14:49.373 回答