如何设置与主要内容重叠的粘性页脚背景?
我正在建立一个底部有背景图像的网站。这实际上应该是一个粘性页脚,如果页面内容较短,它位于视口的底部,但如果内容较长,它将向下移动到视口底部下方。这可以毫无问题地完成,但我希望内容能够将页脚图像重叠到某个点。因此,例如,如果页脚图像的高度为 100px(并且内容足够长),我希望页脚粘在视口的底部,内容与它重叠 80px(在底部留下 20px 的间隙)。如果内容长于此,则页脚应向下移动到视口底部下方,以便内容底部和页脚末尾之间仍有 20 像素的空间。我可能很愚蠢,但我不知道如何做到这一点,如果有人能指出我正确的方向,我将不胜感激?
非常感谢!
戴夫
I am building a site which has a background image at the bottom. This should effectively be a sticky footer whereby it sits at the bottom of the viewport if the page content is short but will move down below the viewport bottom if the content is longer. This can be done without a problem however I want the content to be able to overlap the footer image to a certain point. So if the footer image is 100px in height for example (and the content is long enough) I would want the footer stuck to the bottom of the viewport with the content overlapping it by 80px (leaving a 20px gap at the bottom). If the content is longer than this then the footer should move down below the viewport bottom so there is still a 20px space between the bottom of the content and the end of the footer. I'm probably being stupid but I can't work out how to do this and would be most grateful if someone could point me in the right direction?
Thanks so much!
Dave
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)