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

标签 html grid system 960.gs

我刚开始使用 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 .换句话说,它们应该紧挨着。

最佳答案

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

希望这对您有所帮助。

关于html - 使用 CSS 和 960gs 定位页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2808134/

相关文章:

jquery - 使用 jquery css 函数传递变量不起作用?

html - 我怎样才能摆脱网站顶部和导航栏之间的开放空间( Bootstrap )

javascript - 增加/减少屏幕上的值的按钮

javascript - jsGrid编辑支付金额

javascript - 在jqgrid中实现删除和编辑操作

html - 使用 Angular 或 Angular Material 的 HTML 表格单元格内的垂直线和水平双向箭头

c - C语言中的 "for ( ; ; ) "是什么意思?

用 C 语言进行 Cgi 编程,从我的 cgi 程序中调用 system()。

lua - 电晕,system.scheduleNotification 无法正常工作

grid - Acumatica - 从代码隐藏的网格中获取多条选定行