设置高度内容,扩展浏览器其余部分高度的页脚

发布于 2024-12-09 21:02:20 字数 150 浏览 1 评论 0原文

所以我知道第一个想法是“粘性页脚”,但事实并非如此。变量是页脚高度。

我有一个页面,其中主要内容距离顶部有 200px 边距...在内容之后,我需要页脚一直向下延伸以达到浏览器高度的其余部分;将会有一个 1600px 的背景图片repeat-x

So I know the first thought is "Sticky Footer", but that's not really the case. It's the footer height that's the variable.

I have a page where the main content is 200px margin from the top... after the content, I need the footer to extend all the way down for the remainder of the browser height; there will be a 1600px background image that will repeat-x

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(3

哥,最终变帅啦 2024-12-16 21:02:20

这是一个技巧。像平常一样制作页眉、内容和页脚。将页脚的高度设置为 100% 并为其指定 position:fixed 属性,并确保您为其指定顶部、底部等属性。这将使页脚“脱离流动”,但将其保留在自然的位置(这会消除任何难看的滚动条)。

您可以在此处的示例演示中看到它的实际效果。

Here's one trick. Make your header, content, and footer as you normally would. Set the height of the footer to 100% and give it the position:fixed attribute, and make sure that you don't give it a top, bottom, etc. attribute. This will take the footer "out of flow" but leave it right where it would be naturally (this removes any ugly scroll bars).

you can see it in action in the example demo here.

旧梦荧光笔 2024-12-16 21:02:20

为什么不直接让 body 具有页脚的 background-image 呢?

然后,您可以将主要内容设置为您喜欢的任何背景,页脚将显示为延伸到页面的其余部分。

Why not just make body have the background-image of the footer?

Then, you can set the main content to have whatever background you like, and the footer will appear to extend to the rest of the page.

一页 2024-12-16 21:02:20

http://jsfiddle.net/JFtwD/25/
以下是您可以如何做到这一点。不知道这是否是最好的解决方案,但它是一个解决方案。

http://jsfiddle.net/JFtwD/25/
Here is how you could do it. Don't know if it is the best solution, but it is a solution.

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