设置高度内容,扩展浏览器其余部分高度的页脚
所以我知道第一个想法是“粘性页脚”,但事实并非如此。变量是页脚高度。
我有一个页面,其中主要内容距离顶部有 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是一个技巧。像平常一样制作页眉、内容和页脚。将页脚的高度设置为 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.
为什么不直接让
body
具有页脚的background-image
呢?然后,您可以将主要内容设置为您喜欢的任何背景,页脚将显示为延伸到页面的其余部分。
Why not just make
body
have thebackground-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.
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.