CSS应用:让页脚紧贴页面底部
发布时间：2018-09-09 05:52:46 所属栏目：创业 来源：站长网
导读：怎么行使Sticky Footer代码 先容 Google一下可以找到许多让页脚紧贴页面底部的要领，我试过个中的许多，但他们总会在某些方面存在一些题目。之以是有这些题目，也许是由于呈现了更新版本的赏识器。一些要领由于过分长远，本来在老版本赏识器可以正常事变，
|
怎么行使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标签的表面。 <!--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的表面放一些元素，他们必需行使绝对位置；不然，页面上计较好的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: -150px; /* negative value of footer height */ height: 150px; clear:both;} 你会发明，页脚的高度在这里被一再行使了三次，这是至关重要的，并且三个高度必需行使同样的值。wrap的height属性把本身拉伸至窗口所有高度的尺寸，负的margin会把footer进步到main的padding的位置上去，由于main已经在wrap的内里，以是main的padding已经是wrap 100%高度的一部门。 这样，footer就留在页面的底部了。 此刻还不算完成，我们还必要去clearfix main。 Clearfix Hack to the Rescue 大都SS designers对Clearfix Hack很认识，它办理了许多元素悬浮的题目，在这里，我们用它使得Google Chrome内里的页脚紧贴页面底部。它同时也办理了两列悬浮机关所带来的题目。这样你就可以把内容放在一列，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标签内部，假如对一些元素行使top可能bottom margin，也许会呈现footer被向下移动的征象，移动间隔一样平常是所用的margin的高度。这种环境下，可以行使padding更换margin来添补元素间隙。在页面内容少的环境下，footer原来应该在页面的底部，窗口的转动条汇报你footer在页面底部偏下的位置。找到谁人捣乱的margin，并用padding替代掉。 为main声明padding的时辰要多加警惕，假如你添加了这样的代码：padding:0 10px 0 10px，你就包围了谁人至关重要的原来应该和footer一样的padding。Google Chrome中，在页面内允许多的环境下，footer就会和你的页面内容重叠在一路。 字体的巨细 配置字体巨细的时辰，假如你行使相对尺寸，要留意有些会见者也许会在表现器设置中行使较大字体。假如footer下面没有剩余足够的空间来容纳大字体，页面高度的配置就会被粉碎，从而导致footer下面有多余的旷地。以是，请行使 绝对巨细(px)，不要行使pt可能em。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
