【问题标题】:I need help figuring out a sticky footer我需要帮助找出粘性页脚
【发布时间】:2013-06-14 01:24:39
【问题描述】:

终于飞跃到<div>s,而不是表格布局。我已经准备好拔头发了。

我希望这会有所帮助。我正在为this拍摄。

所以更容易解释:image

蓝色、粉色和黄色的盒子可以正常工作。我什至可以通过使用粘性页脚来获得底部的绿色。但是红色的盒子对我来说把一切都搞砸了,因为它的顶部比黄色的盒子高。我很想知道如何解决这个问题。

对于如何实现这一点的一些建议将比我能用言语表达的更感激。

【问题讨论】:

  • 红框和蓝框是干什么用的?
  • 您需要发布一些 CSS 和 HTML,以便我们了解发生了什么。我也同上红色和蓝色框的问题......
  • 红蓝框是深灰色的重复图案。背景的其余部分是深蓝色。我添加它们是为了创造深度(我考虑不这样做,但我认为它看起来更好,它让我发疯,我无法弄清楚)。
  • 相对位置,z-index: 1000,是这个问题吗?
  • 这里是我到目前为止所做的一个示例:jsfiddle.net/WMV7P/6 我可以在内容后面放一个 div 来拉伸颜色,我只是不知道如何保持大页脚后面的背景。

标签: css html footer sticky


【解决方案1】:

这里,这是您要找的布局吗? http://jsfiddle.net/GzPnL/

您可以在您的 CSS 中使用 position:absolute;bottom:0;

【讨论】:

  • 太棒了,它确实给出了形状。但是一旦内容比页面长,底部就会停留在原来的位置。这是一个例子:jsfiddle.net/GzPnL/1
  • 为了让页脚保持原样,即使内容更长,您需要为页脚提供属性position: fixed; 而不是position: absolute; 我希望这可以解决您的问题jsfiddle.net/GzPnL/2
  • 它保持在页面底部,但我希望它在内容底部下方。
  • jsfiddle.net/WMV7P/7/embedded/result - 玩弄边距和填充,我几乎得到了我需要的东西。现在的问题是,当内容短于屏幕时,我无法保留背景颜色。如何将颜色拉伸到底部?
  • 我解决了我的问题! jsfiddle.net/WMV7P/7/light 通过使用边距、填充和 z-index,我得到了我想要的。感谢您的帮助!
猜你喜欢
  • 2010-11-29
  • 2011-12-11
  • 1970-01-01
  • 1970-01-01
  • 2013-04-13
  • 2022-01-17
  • 2016-05-25
  • 1970-01-01
  • 2021-12-19
相关资源
最近更新 更多