粘性页脚的麻烦

时间:2017-11-30 20:17:24

标签: css footer sticky-footer

我似乎无法让我的粘性页脚工作。根据一些研究,我的理解是页脚的父元素需要设置为position:relative。然后页脚应该设置为position:absolute with bottom:0。我已经完成了,它看起来很好全屏。但是当浏览器调整为较小时,页脚位于页面中间。有什么建议?我一直在寻找大约一个小时没有运气。谢谢!

编辑:为了澄清,我希望只有在您滚动到页面底部或整个页面在视图中时才会显示页脚。始终不在页面上持久(位置:固定。)

(Please see the codepen link below)

Codepen Link

1 个答案:

答案 0 :(得分:1)

您需要将min-height: 100%;设置为总体div / body。您还需要将padding添加到页脚之前的div .content-area,以便footer在屏幕高度较小时不会覆盖您的内容。< / p>

https://codepen.io/anon/pen/mqaVxM