使用 CSS 和 960gs 定位页脚

Question

我是使用 CSS 进行布局的新手（我已经很久没有做过任何网页设计了），我似乎不知道如何让页面的页脚显示在底部我想要的方式。

要求： - 如果内容超过视口的垂直大小，则显示在内容的底部 - 如果视口超出内容的垂直大小，则显示在视口底部。

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

代码： <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 实现它时遇到的主要问题是 960gs CSS 中的float:left;。似乎它阻止了我的网格垂直扩展父<div>。但是，如果我删除浮动，960gs 似乎也不起作用。

以下是删除浮动的链接。 'a' 列是 grid_7 suffix_1，而 'b' 列应该是 grid_4 在同一个 container_12 中。换句话说，它们应该彼此相邻。

Answer 1

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

希望这会有所帮助。

Answer 2

在 CSS 中，没有“if/else”功能。这就是脚本语言的用武之地。

查找 JQuery。在 JQuery 中，您可以使用 #id 页脚抓取一个元素，然后说如下内容：

$('#footer').addClass('bottomView');

'bottomView' 可以使带有 id 页脚的元素粘在视口的底部。然后，当用户滚动时，JQuery 可以监视，它可以检查是否要将类更改为“bottomContent”。

然后在你的 css 中，只需要将元素放在你想要的位置的底部视图和底部内容类。

祝你好运。