我刚开始使用 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/