3

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

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

4

2 回答 2

4

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

希望这可以帮助。

于 2010-05-14T20:33:54.420 回答
0

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

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

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

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

然后在你的css中，只有bottomView和bottomContent类将元素放置在你想要的位置。

祝你好运。

于 2010-05-11T05:21:33.383 回答