让页脚紧贴网页页面底部的CSS编码

日期:2021-03-13 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

如何应用Sticky Footer编码

详细介绍

Google1下能够寻找许多让页脚紧贴网页页面底部的方式,我试过在其中的许多,但她们总会在一些层面存在1些难题。之因此有这些难题,将会是由于出現了升级版本号的访问器。1些方式由于太太久远,本来在老版本号访问器能够一切正常工作中,却已不可用升级以后的版本号。也由于这些网页页面太太久远,以往曾被很多连接过,因此在Google的結果中排名很高。这样,1些网站后台管理员在检索sticky footer计划方案的情况下,对检索出的結果都很挠头,由于排在检索結果前列的方式都有这样那样的难题。
大家都知道的是Ryan Fait的计划方案,它确实工作中的很好。可是,它务必要独立写1个沒有內容的div,来出示附加的"push"。对HTML词义规定严苛的人能够说编码这么写是不符标准的,大家的计划方案无需额外的div。
即将详细介绍的Sticky Footer计划方案是创建在Exploring Footers article from A List Apart成效的基本上,并遭受Cameron Adams和this piece at lwis.net工作中的启迪。在Google Chrome和别的访问器中,当你放缩对话框的情况下,页脚会浮上来。该计划方案会运用1种Clear fix hack方式,把页脚固定不动在适度的部位上,这类方式另外也处理了网页页面合理布局是多列或3列飘浮将会会带来的难题。在超出50种以上的访问器检测中,它都能很好的工作中。

HTML 编码

下面是HTML编码的基础构造,footer标识在wrap标识的外面。


拷贝编码
编码以下:

<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>


网页页面內容能够放在main标识的內部。比如,下面是多列飘浮网页页面合理布局的HTML编码;

拷贝编码
编码以下:

<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>



Header放在wrap的里边,main的上面,以下所示;

拷贝编码
编码以下:

<!--Example Source Code-->
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>



假如你必须在wrap或footer的外面放1些元素,她们务必应用肯定部位;不然,网页页面上测算好的100%的高宽比会被弄乱掉。

CSS 编码

下面的CSS编码使页脚紧贴在网页页面的底部。

拷贝编码
编码以下:

/*Example Source Code*/
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: ⑴50px; /* negative value of footer height */
height: 150px;
clear:both;}


你会发现,页脚的高宽比在这里被反复应用了3次,这是相当关键的,并且3个高宽比务必应用一样的值。wrap的height特性把自身拉伸至对话框所有高宽比的规格,负的margin会把footer提升到main的padding的部位上去,由于main早已在wrap的里边,因此main的padding早已是wrap 100%高宽比的1一部分。 这样,footer就留在网页页面的底部了。
如今还不算进行,大家还必须去clearfix main。

Clearfix Hack to the Rescue

大部分SS designers对Clearfix Hack很熟习,它处理了许多元素飘浮的难题,在这里,大家用它使得Google Chrome里边的页脚紧贴网页页面底部。它另外也处理了多列飘浮合理布局所带来的难题。这样你便可以把內容放在1列,sidebar放在另外一列,不容易出現某些访问器下面main里边的飘浮的內容致使页脚浮上来的状况。
下面的编码也添加到大家的 stylesheet 里边去;

拷贝编码
编码以下:

/*Example Source Code*/
.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,在两列飘浮的网页页面中,一样必须用到clearfix。

必须掌握的內容

高宽比和边距

Header,wrap或main标识內部,假如对1些元素应用top或bottom margin,将会会出現footer被向下挪动的状况,挪动间距1般是所用的margin的高宽比。这类状况下,可使用padding取代margin来填充元素空隙。在网页页面內容少的状况下,footer原本应当在网页页面的底部,对话框的翻转条告知你footer在网页页面底部偏下的部位。寻找那个捣蛋的margin,并用padding更换掉。
为main申明padding的情况下要多加当心,假如你加上了这样的编码:padding:0 10px 0 10px,你就遮盖了那个相当关键的原本应当和footer1样的padding。Google Chrome中,在网页页面內容许多的状况下,footer就会和你的网页页面內容重合在1起。

字体样式的尺寸

设定字体样式尺寸的情况下,假如你应用相对性规格,要留意一些浏览者将会会在显示信息器配备中应用较大字体样式。假如footer下面沒有剩下充足的室内空间来容下大字体样式,网页页面高宽比的设定就会被破坏,从而致使footer下面有过剩的间隙。因此,请应用
肯定尺寸(px),不必应用pt或em。

HTML和CSS源文档装包免费下载
上一篇:可靠网站验证 返回下一篇:没有了