网页布局
2020-12-13 02:46
怎么使用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
页面内容可以放在main
Header放在wrap的里面,main的上面,如下所示;
如果你需要在wrap或者footer的外面放一些元素,他们必须使用绝对位置;否则,页面上计算好的100%的高度会被弄乱掉。
CSS 代码
下面的CSS代码使页脚紧贴在页面的底部。
html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* must be same height as the footer */ #footer {position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;}
你会发现,页脚的高度在这里被重复使用了三次,这是至关重要的,而且三个高度必须使用同样的值。wrap
现在还不算完成,我们还需要去clearfix main
Clearfix Hack to the Rescue
多数SS designers对Clearfix Hack很熟悉,它解决了很多元素悬浮的问题,在这里,我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列,sidebar放在另一列,不会出现个别浏览器下面main
下面的代码也加入到我们的 stylesheet 里面去;
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
如果你比较喜欢Ryan Fait的方法,添加额外的push
需要了解的内容
高度和边距
Header,wrap或者main
为main
字体的大小
设置字体大小的时候,如果你使用相对尺寸,要注意有些访问者可能会在显示器配置中使用较大字体。如果footer下面没有剩余足够的空间来容纳大字体,页面高度的设置就会被破坏,从而导致footer下面有多余的空隙。所以,请使用绝对大小(px),不要使用pt或者em。