Question

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

Answer 1

我会为页脚制作css类 -

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

比jQuery

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

因此，如果身体比窗口短，它会添加类以使其坚持底部，但如果身体更高，那么这将是正常的。

Answer 2

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

只是建议尝试。

Answer 3

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

<!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>

Answer 4

如果您使用：

position:fixed;
bottom:0px;

应该这样做

如果您需要，请width:100%;。

将页脚粘贴到页面底部

4 个答案: