【问题标题】:Sticky footer not sticking to bottom of page粘性页脚不粘在页面底部
【发布时间】:2012-08-09 04:30:50
【问题描述】:

我的网站页脚似乎有问题。基本上它不会粘在我的页面底部,而是粘在我的 div 底部,称为 main。谁能帮我这个?

如果您缩小网页,您会看到问题:)

this site

我没有粘贴代码,因为它包含很多 php 等。希望没事。 :)

页脚css:

#footer{
width: 100%;
float: left;
height: 70px;
bottom: 0;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block; 

}

【问题讨论】:

  • 不太一样。最后一个问题得到了回答。我的内容页面现在正在扩展并将页脚向下推,但它并没有粘在底部。和以前的问题不一样了。
  • 你能把#footer的CSS贴出来吗?
  • 当然,我现在添加了它。 :)
  • 它在 Win 7 上的 Chrome 21 中运行。

标签: html css sticky-footer


【解决方案1】:
#footer{
    width: 100%;
    height: 70px;
    clear: both;
    background-image: url("../images/footer_pattern.png");
    position: fixed;
    bottom: 0;
}

【讨论】:

  • 支持置顶页脚的正确答案,但仍然没有解决我的问题。我想我可能误解了粘性页脚的概念,但我要求的是让页脚始终留在文档的底部,而不是不必要地显示在屏幕上。对不起我的英语。
  • 那不是粘性页脚。只需按照您的方式进行操作,然后在内容 div 上放置一个 1000px 的最小宽度以将其推到底部。而且,我的回答对你提出的问题是正确的。
  • 在添加评论之前我没有注意到这一点,抱歉。只是为了澄清:“粘性”元素是粘在页面上并且根据定义不会移动的元素。
  • 我现在实际上正在尝试。我真的无法让它工作:P
【解决方案2】:

对于您所指的网站,通过扩展包装器 div,它会将页脚向下推。下面是包装器的修改后的css。

  #wrapper
  {
      height: 100%;
      margin: 0 auto;
      min-width: 1000px;
  }

将高度设置为 100% 而不是自动。

通过将包装器高度设置为 100%,它会将 div 扩展到窗口底部,并将页脚也向下推。

我要改变的另一件事是不让#footer 向左浮动。

【讨论】:

  • 使用!important 是非常糟糕的风格。相反,您应该调整您的特殊性,以便浏览器将样式呈现在其他样式之上。
  • 我在回答中添加了说明。我指的是#wrapper div,它是围绕页脚和页面其余部分的div。我从原始海报所指的网站上获得了 css 代码。
  • @chop,感谢您在答案开头添加您的说明。这更有意义
  • 是的,但是 OP 需要一个粘性页脚。当内容大于窗口时,您的解决方案会将页脚向下推到窗口中文档的显示之外。为了使其成为粘性页脚,无论内容大小如何,页脚都必须显示在窗口底部。
  • @Tom,根据您的问题,您的解决方案是最准确的。 (+1)我选择以不同的方式解决这个问题,仍然将页脚放在屏幕底部。原因是页脚背景图像的顶部与主要内容一样具有白色。我觉得网页在主要内容的背景图像中没有间隙会更好看。下次我会更密切地关注操作。
猜你喜欢
  • 2012-10-19
  • 2020-04-04
  • 2016-05-01
  • 2011-06-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多