为什么不使用位置：固定为“粘性”页脚？ [英] Why not used position:fixed for a "sticky" footer?

问题描述

我已经看到 Ryan Fait的方法为粘性页脚，以及一个此处和这里。

为什么这些人为粘性页脚制作模板 #footer {position：fixed; bottom：0;} 将足够了？

编辑：

我将添加使用 position：fixed; 为一个页脚确实打破 margin：auto; 居中（至少）一些浏览器，从而创建一个包装标签的需要。上面提到的方法的一部分我的问题是额外的标签是混乱，语法不正确（对于HTML纯粹主义者），它吃带宽。但是，在我看来，围绕页脚的单个包装仍然比整个混乱的页面模板更好。

解决方案

使用之间的区别是，位置：固定和 Ryan Fait的方法是相当根本的。

当使用 position：fixed 时，页脚始终可见，这不是粘帖页面尝试做的。

如果内容长于视口高度，则粘性页脚的含义是保持粘贴在底部， 除外。

在 http://www.mcemperor.nl/pub/stickyfooter ，您可以看到粘性页脚的效果。

I've seen Ryan Fait's method for sticky footer as well as one here and here.

Why are these people making templates for sticky footers when #footer{position:fixed; bottom:0;} will suffice?

EDIT:

I will add that using position: fixed; for a footer does break margin: auto; centering in (at least) some browsers, thus creating the need for a wrapper tag. Part of my problem with the above mentioned methods is the extra tags which are confusing, syntactically incorrect (for the "HTML purists") and it eats bandwidth. However, a single wrapper around the footer is still, in my opinion, better than a whole jumbled page template to have to start with. And, "my" way is still more straightforward and eats less bandwidth.

解决方案

The difference between using position: fixed and Ryan Fait's method is pretty fundamental.

When using position: fixed, the footer is always visible, and that's not what a sticky footer is trying to do.
The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height. In that case, the sticky footer will act like a normal footer, appearing just below the page content.

On http://www.mcemperor.nl/pub/stickyfooter, you can see the effect of a sticky footer.

这篇关于为什么不使用位置：固定为“粘性”页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！