如何设置与主要内容重叠的粘性页脚背景?

发布于 2024-12-19 18:47:45 字数 298 浏览 3 评论 0原文

我正在建立一个底部有背景图像的网站。这实际上应该是一个粘性页脚,如果页面内容较短,它位于视口的底部,但如果内容较长,它将向下移动到视口底部下方。这可以毫无问题地完成,但我希望内容能够将页脚图像重叠到某个点。因此,例如,如果页脚图像的高度为 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

阿楠 2024-12-26 18:47:45

我显然没有仔细观察,实际上你可以降低推送 div 的高度,这将改变内容与页脚重叠的程度,这绝对是完美的,非常感谢你让我再看一眼!< /p>

I obviously didn't look closely enough, you can actually just decrease the height of the push div which will change how much the content overlaps the footer, that's absolutely perfect, thanks for so much for making me take another look!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文