本文主要包含页脚,页面底部等相关知识,佚名 希望在学习及工作中可以帮助到您
怎么使用Sticky Footer代码
介绍
Google一下可以找到很多让页脚紧贴页面底部的方法,我试过其中的很多,但他们总会在某些方面存在一些问题。之所以有这些问题,可能是因为出现了更新版本的浏览器。一些方法因为太过久远,原本在老版本浏览器可以正常工作,却不再适用更新之后的版本。也因为这些页面太过久远,过去曾被大量链接过,所以在Google的结果中排名很高。这样,一些网站管理员在搜索sticky footer方案的时候,对搜索出的结果都很挠头,因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案,它的确工作的很好。但是,它必须要单独写一个没有内容的div,来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的,我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上,并受到Cameron Adams和this piece at lwis.net工作的启发。在Google Chrome和其他浏览器中,当你缩放窗口的时候,页脚会浮上来。该方案会应用一种Clear fix hack方法,把页脚固定在适当的位置上,这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中,它都能很好的工作。
HTML 代码
下面是HTML代码的基本结构,footer标签在wrap标签的外面。
HTML和CSS源文件打包下载
介绍
Google一下可以找到很多让页脚紧贴页面底部的方法,我试过其中的很多,但他们总会在某些方面存在一些问题。之所以有这些问题,可能是因为出现了更新版本的浏览器。一些方法因为太过久远,原本在老版本浏览器可以正常工作,却不再适用更新之后的版本。也因为这些页面太过久远,过去曾被大量链接过,所以在Google的结果中排名很高。这样,一些网站管理员在搜索sticky footer方案的时候,对搜索出的结果都很挠头,因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案,它的确工作的很好。但是,它必须要单独写一个没有内容的div,来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的,我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上,并受到Cameron Adams和this piece at lwis.net工作的启发。在Google Chrome和其他浏览器中,当你缩放窗口的时候,页脚会浮上来。该方案会应用一种Clear fix hack方法,把页脚固定在适当的位置上,这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中,它都能很好的工作。
HTML 代码
下面是HTML代码的基本结构,footer标签在wrap标签的外面。
HTML和CSS源文件打包下载