无法获得CSS Sticky页脚工作。我究竟做错了什么？

Well, this is my first post here and really enjoying the site.

嗯,这是我在这里的第一篇文章,真的很喜欢这个网站。

I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.

我有一个非常基本的(丑陋的罪恶)网站我已经开始,由于某种原因,我无法让CSS Sticky页脚为FireFox工作。 IE可以工作,但FF显示它在页面的中间位置。

The URL is http://dev.aipoker.co.uk

该URL是http://dev.aipoker.co.uk

I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.

我知道我应该在FF中进行开发并在IE中进行bug修复,所以我猜我可能实际上犯了一个错误,并且它在某种程度上适用于IE,但在其他任何地方都没有。

Can anyone help put me out of my misery please?

任何人都可以帮助我摆脱痛苦吗?

Thanks, guys and gals.

谢谢,伙计们和男孩们。

4 个解决方案

#1

Try this one, it works well on Firefox.

试试这个,它适用于Firefox。

BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)

顺便说一下,如果你还没有,你应该听听Boagworld的播客。这个棒极了! :)

Cheers.

#2

I've had success with code like this:

我已成功使用这样的代码:

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

#3

The minimal changes I can see to do this would be:

我能看到的最小变化是:

move footerSection inside of body

将footerSection移动到体内

set position absolute on both body and footerSection

在body和footerSection上设置绝对位置

set bottom = 0px on footerSection

在footerSection上设置bottom = 0px

which ends up with something like this in your head:

最终会出现这样的事情:

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

#4

This is all you need to know about css only sticky footers & sticky navs:

这就是你需要知道的关于css只有粘性页脚和粘性导航的所有信息:

Stick to bottom of page

坚持到页面底部

Position: absolute;
top:auto;
bottom: 0;

Stick to bottom of screen

坚持到屏幕的底部

Position: fixed;
top:auto;
bottom:0;

Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.

任何问题,这可能是由于你放置你的html代码的位置(不要使页脚成为子元素,除非它坚持内容包装),或重叠CSS。

You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.

您可以通过翻转自动和顶部将相同的技术应用于粘性导航。它是跨浏览器兼容的(来自IE7及以上的内存),包括手机。

#1