html - 使用 CSS 和 960gs 定位页脚

Question

我刚开始使用 CSS 进行布局(我很长一段时间没有做过任何网页设计)而且我似乎无法弄清楚如何让页面的页脚显示在底部我想要的方式。

要求:- 如果内容超出视口(viewport)的垂直尺寸，则显示在内容底部- 如果视口(viewport)超出内容的垂直尺寸，则在视口(viewport)底部显示。

我正在使用的代码将页脚设置在视口(viewport)底部，但如果我将浏览器的大小设置得比内容短，它只会覆盖内容。

代码: <div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>

我的主要目标是让页脚带有文本(即公司信息、联系信息)和背景渐变。我希望页脚背景跨越页面的宽度，但我不知道我是否可以使用 960 gs div 做到这一点。

编辑:我想用所有 CSS 来做这件事，如果可能的话不要脚本。
我在这个链接上找到了一些很好的代码来获取 CSS 页脚:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

我现在在使用 960gs 时遇到的主要问题是 float:left;在 960gs CSS 中。它似乎阻止了我的网格垂直扩展父级 <div> .但是，如果我删除 float ，960gs 似乎也无法正常工作。

以下是去除 float 的链接。 'a' 列是 grid_7 suffix_1 'b'列应该是grid_4在同一container_12 .换句话说，它们应该紧挨着。

Answer 1

看看CSS Sticky Footer .它是在纯 html/css 中完成的，根本没有脚本。在 signalkraft.com 中有关于如何让它与 960gs 一起工作的解释。 .

希望这对您有所帮助。