html - Stick footer 无 CSS 教程,享受乐趣

标签 html css layout footer

我有一个简单的任务:将页脚粘贴到底部(粘性页脚)。

我在 stackoverflow 和 google 上搜索了几个主题。

好像有两种技巧:

  1. http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css (重置所有元素的填充和边距、拉伸(stretch)包装、清除两者或其他附加模组)

  2. 绝对定位

第一个看起来像一些黑客(也没有工作)所以我想坚持绝对定位(底部:0;)但在这里我提到了内容很大的页面(很多段落)页脚挂起当我向下滚动时在中间...

但是这里是 fiddle ,希望有人发现我的错误: http://jsfiddle.net/379gr/

问候

最佳答案

这是FooterStick:http://jsfiddle.net/jAbw4/ .

回到你的代码。将#content_wrapper 的属性“位置”设置为相对。否则,包含 block 将是初始包含 block 。初始包含 block 覆盖了视口(viewport)区域,因此,您的页脚的行为与您的问题中所述相同。

顺便说一句:Cameron Adams 写了一个更稳健的页脚定位方法:FooterStickAlt .他更喜欢 FooterStickAlt,因为可以观察到 旧版 gecko 浏览器中的绘制错误 和 IE(使用 FooterStick 时):当内容在加载过程中变化很大。因此,如果例如包含没有尺寸信息的图片,则绝对定位元素将保留在第一次确定的位置,并且不会随着内容的增长而向下移动。 FooterStickAlt 没有这个问题

关于html - Stick footer 无 CSS 教程,享受乐趣,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10703317/

相关文章:

html - CSS 文件会发送到浏览器吗?

javascript - 在花括号 AngularJS 中访问窗口高度?

css - 删除事件选项卡上的额外填充 [wp]

java - Java布局中的元素都在同一位置

html - 什么是 clearfix?

javascript - 提供客户端分页Backbone.js

javascript - AngularJS 逻辑应该放在 HTML 文件中吗?

html - 如何在移动布局上从上到下移动 div?

html - 如何将放置在 iFrame 内的 div 定位在屏幕中央

WPF 和 Silverlight 控件和布局平移和缩放功能