如何将页脚固定在页面底部(多种方法实现)
作者：佚名
字体：[ ] 来源：互联网 时间：04-01 12:20:03
当一个HTML页面中含有较少的内容时，Web页面的footer部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，接下来为大家介绍下如何将页脚固定在页面底部，感兴趣的朋友可以了解下
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的&footer&部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的&footer&部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示： 那么今天主要和大家一起学习如何将页脚固定在页面的底部？ 方法一 首先我们来看第一种方法，这种方法是来自于的《》。下面我们就一起来看看介绍的方法。 HTML Markup 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& 页面容容部分 &/div& &div id="footer"&Footer Section&/div& &/div& 其实我们可以在div#page增加所需的内容结构，如下所示： 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left Sidebar&/div& &div id="content"&Main content&/div& &div id="right"&Right sidebar&/div& &/div& &div id="footer"&Footer Section&/div& &/div& 真正来说，实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分） CSS Code 代码如下: html,body { margin: 0; padding:0; height: 100%; } #container { min-height:100%; height: auto ! height: 100%; /*IE6不识别min-height*/ position: } #header { background: #ff0; padding: 10 } #page { width: 960 margin: 0 padding-bottom: 60/*等于footer的高度*/ } #footer { position: bottom: 0; width: 100%; height: 60/*脚部的高度*/ background: #6 clear: } /*=======主体内容部分=======*/ #left { width: 220 float: margin-right: 20 background: } #content { background: float: width: 480 margin-right: 20 } #right{ background: float: width: 220 } 下面我们一起来看看这种方法的实现原理： 1.&html&和&body&标签：html和body标签中必须将高度(height)设置为&100%&,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0； 2.div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读了解如何解决min-height在Ie6下的bug问题。另外我们还需要在div#container容器中设置一个&position:relative&以便于里面的元素进行绝对定位后不会跑了div#container容器； 3.div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果； 4.div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个&width:100%&，让他在整个页面上得到延伸； 5.其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。 缺点： 不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。 上面就是介绍的如何实现页脚永远固定在页面的底部，如果大家感兴趣可以阅读，也可以直接点击这里查看。 方法二： 这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。 HTML Markup 代码如下: &div id="container"& &div id="page"&Main Content&/div& &/div& &div id="footer"&footer&/div& 上面的代码是最基本的HTML Code，同时你也发现了div#footer和div#container是同辈关系，不像方法一，div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中，如：一个三列布局，而且还带有header部分，请看下面的代码： 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main content&/div& &div id="right"&Right sidebar&/div& &/div& &/div& &div id="footer"&Footer section&/div& CSS Code 代码如下: html, body { height: 100%; margin: 0; padding: 0; } #container { min-height: 100%; height: auto ! height: 100%; } #page { padding-bottom: 60/*高度等于footer的高度*/ } #footer { position: margin-top: -60/*等于footer的高度*/ height: 60 clear: background: #c6f; } /*==========其他div==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } 方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么两种方法不同之处是： 1.div#footer放在div#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与div#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏div#container容器的min-height值； 2.div#footer进行margin-top的负值设置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。 缺点： 要给footer设置固定值，因此无法让footer部分自适应高度。 大家要是对这种方法感兴趣，你也可以浏览一下《》和《》，或者直接点击查看其源代码。 方法三： 实现在页脚永远固定在页面底部的方法有很多，但是有很多方法是需要使用一些hack或借助javaScrip来实现，那么接下来要说的方法三，仅仅使用了15行的样式代码和一个简单明了的HTML结构实现了效果，并且兼容性强，别的不多说，先看代码。 HTML Code 代码如下: &div id="container"& &div id="page"&Your Website content here.&/div& &div class="push"&&!-- not have any content --&&/div& &/div& &div id="footer"&Footer Section&/div& 上面是最基本的HTML Markup，当然你也可以加上新的内容，不过有一点需要注意如果你在div#container和div#footer容器外增加内容的话，新加进徕的元素需要进行绝对定位。如如说你可以在div#container容器中加上你页面所需的元素 HTML Code 代码如下: &div id="container"& &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main Content&/div& &div id="right"&Right Content&/div& &/div& &div class="push"&&!-- not put anything here --&&/div& &/div& &div id="footer"&Footer Section&/div& CSS Code 代码如下: html, body{ height: 100%; margin:0; padding:0; } #container { min-height: 100%; height: auto ! height: 100%; margin: 0 auto -60/*margin-bottom的负值等于footer高度*/ } .push, #footer { height: 60 clear: } /*==========其他div效果==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } #footer { background: #f6c; } 跟前面两种方法相比较，方法三更类似于方法二，他们都将div#footer放在div#container容器之外，而且这个方法在div#container容器中还增加了一个div.push用来把div#footer推下去，下面我们就一起看看这种方法是怎么实现页脚永远固定在页面底部的。1.&html&和&body&标签：html,body标签和前两种方法一样，需要设置&height:100%&并重置&margin&和&padding&为0； 2.div#container:方法三关键部分就在于div#container的设置，首先需要设置其最小高度（min-height）为100％,为了能兼容好IE6，需要对min-height进行兼容处理（具体处理方法看前面或代码）另外这里还有一个关键点在div#container容器上需要设置一个margin-bottom，并且给其取负值，而且值的大小等于div#footer和div.push的高度，如果div#footer和div.push设置了padding和border值，那么div#container的margin-bottom负值需要加上div#footer和div.push的padding和border值。也就是说&div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}&。一句话来说：div#container的margin-bottom负值需要和div#footer以及div.push的高度一致（如果有padding或border时，高度值需要加上他们）； 3.div.push:在div.push中我们不应该放置任何内容，而且这个div必须放置在div#container容器中，而且是最底部，并且需要设置其高度值等于div#footer的值，最好加上clear:both来清除浮动。div.push容器在此处所起的作用就是将footer往下推。 4.div#footer容器：div#footer容器和方法二一样，不能放到div#container内部，而和div#container容器同级，如果需要设置元素和footer之间的间距，最好使用padding来代替margin值。 优点： 简单明了，易于理解，兼容所有浏览器。 缺点： 较之前面的两种方法，多使用了一个div.push容器，同样此方法限制了footer部分高度，无法达到自适应高度效果。 如果大家对方法三想了解更多可以点击或者直接从中下载代码自己研究一下。 方法四： 前面三种方法我们都不需要任何javaScript或jQuery的帮助，让我们实现了页脚永远固定在页面底部的效果，前面三种方法虽然没有使用jQuery等帮助，但我们都额外增加了HTML标签来实现效果。如果你省略了这些HTML标签，再要实现效果就比较困难了，那么此时使用jQuery或javaScript方法来帮助实现是一种很好的办法，下面我们就一起来看第四种方法，通过jQuery来实现页脚永远固定在页面底部的效果。 HTML Markup 代码如下: &div id="header"&Header Section&/div& &div id="page" class="clearfix"& &div id="left"&Left sidebar&/div& &div id="content"&Main Content&/div& &div id="right"&Right Content&/div& &/div& &div id="footer"&Footer Section&/div& 这里我们没有增加没用的HTML标签，此时你也可以随时在body中增加内容，只要确保div#footer是在body最后面。 代码如下: &div id="footer"&Footer Section&/div& CSS Code 代码如下: *{margin: 0;padding:0;} .clearfix:before, .clearfix:after { content:""; display: } .clearfix:after { clear: } .clearfix { zoom:1; /* IE &8 */ } #footer{ height: 60 background: #fc6; width: 100%; } /*==========其他div==========*/ #header { padding: 10 background: } #left { width: 18%; float: margin-right: 2%; background: } #content{ width: 60%; float: margin-right: 2%; background: } #right { width: 18%; float: background: } 这个方法不像前面三种方法靠CSS来实现效果，这里只需要按正常的样式需求写样式，不过有一点需要特别注意在html,body中不可以设置高度height为100%，否则此方法无法正常运行，如果你在div#footer中设置了一个高度并把宽度设置为100%将更是万无一失了。 jQuery Code 代码如下: &script type="text/javascript"& // Window load event used just in case window height is dependant upon images $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); //定义positionFooter function function positionFooter() { //取到div#footer高度 footerHeight = $footer.height(); //div#footer离屏幕顶部的距离 footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; /* DEBUGGING STUFF console.log("Document height: ", $(document.body).height()); console.log("Window height: ", $(window).height()); console.log("Window scroll: ", $(window).scrollTop()); console.log("Footer height: ", footerHeight); console.log("Footer top: ", footerTop); console.log("-----------") */ //如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位 if ( ($(document.body).height()+footerHeight) & $(window).height()) { $footer.css({ position: "absolute" }).stop().animate({ top: footerTop }); } else { $footer.css({ position: "static" }); } } $(window).scroll(positionFooter).resize(positionFooter); }); &/script& 使用上面的jQuery代码，可以轻松的帮我们实现页脚永远固定在页面底部，使用这种方法有几个地方需要注意 1.确保正常引入了jQuery版本库，并正常调入了上面那段jQuery代码； 2.确保&div id=&footer&&是在body中最后； 3.确保在html,body中没有设置高度为100%。 优点： 结构简单，无需外加无用标签，兼容所有浏览器，不用另外写特别样式。页脚可以不固定高度。 缺点： 在不支持js的浏览器中无法正常显示，另外每次改变浏览器大小会闪动一下。 今天主要和大家一起探讨和学习了四种方法，用来实现Web页面脚部永远固定在页面的底，这里在着得说清楚一下，是页脚永远固定在页面的底部，而不是永远固定在浏览器窗口的底部，换句话说，就说当页面主内容没有显示屏幕高时，页脚固定在显示器屏幕的底部，但当页面内容超过显示器屏幕高度时，页脚又会跟随内容往下沉，但页脚都永远固定在页的底部。前面三种都是纯CSS实现，最后一种采用的是jQuery方法实现，四种方法各有各的利弊，大家使用时可以根据自己的需求来定夺，希望这篇文章能给大家带来一定的帮助。如果大家有更好的方法，希望能和我一起分享，如果您愿意，可以直接给我留言，我会一直和您在一起，一起学习和讨论这方面的知识。
大家感兴趣的内容
12345678910
最近更新的内容现在的位置:&wordpress&正文
让wodpress博客底部显示当前网站备案号内容
网站备案号内容其实也是权威的一种象征,用户看到网站的备案号,会对您的网站多一分信任感,而让wordpress博客底部显示当前网站备案号内容就显得很有必要了,部落自从网站备案后,就一直显示在网站的下方了.其实现在新版本的wordpress在设置界面就支持显示网站备案号了.
我们比较常见的做法是,直接连接工信部网站,来通过读取相关信息显示已经备案的备案号.
wordpress后台设置界显示网站备案号
这里需要说明一下,wordpress后台设置界显示网站备案号,要想能正常显示在界面,需要使用wordpess系统自带的主题,如下图:
这种方法的缺点就是不支持大多数主题,想必大多数朋友都已经更换了主题了.
用代码来显示网站备案号
1.这里部落先说一下自己的方法,最简单不过了,我直接在footer.php文件加入了以下代码:
&p&Copyright &copy ; &a href="/"&&strong&免费部落&/strong&&/a&. All Rights Reserved ｜浙ICP备号｜&/p&
里面的备案号是部落自己备案时查到的.效果的话,部落网站底部就可以看到,就不再贴图了.
2.连接工信部网站显示
这个操作要稍微麻烦一点,过程如下:
a.通过FTP软件找到wp-config.php文件，然而这个文件wp-config.php文件里面会有一句：
define(‘WP_ZH_CN_ICP_NUM’, true);//用于添加后台备案号的
b.接下来,我们同样打开footer.php文件,加入以下代码:
&a href=”http://www./” rel=”external nofollow” target=”_blank”&
&?php echo get_option( ‘zh_cn_l10n_icp_num’ );?&
这样的话,就显得更加权威了,但这种方法也有一个缺点,有时候会影响到网站的打开速度,毕竟我们需要连接工信部网站来显示备案信息.当然,99.9%以上的时间,几乎是反应不出来的.
在免费部落的网站中,与网站备案相关的话题还有:
3.,没备案可以使用香港节点.
已经备案好的站点,部落建议您加上网站的备案信息,如果还没有备案,那么部落建议您早点将主机移动国内进行备案.
作者: 管理员
【上篇】【下篇】
您可能还会对这些文章感兴趣！今天说说一个经典布局：头尾固定高度中间高度自适应布局！
转文请标明 --- 出处：穆乙
相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！
百度实在让我这个&粉丝&失望。就目前情况来说，百度已经完全轮为&有钱人排行榜&！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！
不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！
很久以前，百度的搜索结果更符合目标，因为他更了解中国人的习惯，这是不可争议，现在情况已经完全相反！
虽然google经常是六脉神剑，但我更欣赏它的搜索结果。吐槽打住!!!
现在开始正式谈论这个经典布局 &&&头尾固定高度中间高度自适应布局
下面说下要求：
1 头部固定高度，宽度100%自适应父容器；
2 底部固定高度，宽度100%自适应父容器；
3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；
4 整个内容填满浏览器可视区域，并且不超出此区域！
先看下效果图：
相信，做过两年前端的同学，拿到这个需求，都有一个感觉&&这挺简单的！
是的，本来就挺简单！
方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染
从我脑海崩出来的第一个念头就是定位布局&&position
而我也是这么做的，因为要固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，
这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半。
上代码，相信这也是符合大部分思路的实现方式：
&!DOCTYPE HTML&
&meta charset="gb2312"&
&title&头尾固定中间高度自适应布局&/title&
html, body {
height:<span style="background-color: #f5f5f5; color: #%;
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:5;
text-align:center;
background:#FC0;
width:<span style="background-color: #f5f5f5; color: #%;
overflow:auto;
top:<span style="background-color: #f5f5f5; color: #px;
position:absolute;
z-index:10;
bottom:<span style="background-color: #f5f5f5; color: #px;
.mycontent {
padding:20px;
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:<span style="background-color: #f5f5f5; color: #;
text-align:center;
&div id="dHead"&固定头部100&/div&
&div id="dBody"&
&div class="mycontent"& 中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
&div id="dFoot"&固定尾部100px&/div&
结果也如上图所示，预期已经达到。经测试：IE7+、firefox、chrome、safari、opera均通过测试！
这里有点要特别说明的地方：当容器被position:absolute或者float:left or right的时候，在没有设定宽度的情况下窗口的表现为紧贴内容；
&!DOCTYPE HTML&
&meta charset="gb2312"&
&title&无标题文档&/title&
*{padding:0;margin:0}
&div style="height:200position: background:#FF9900;"&内容测试&/div&
看下效果图：
但是如果在position:absolute下，同时设定left和right或者同时设定top和bottom的话。宽度和高会被拉伸到指定位置，需要说明的这就是宽度或者高度缺省时position:absolute or fixed 情况下，浏览器对容器的尺寸解析方式。
需要说明的是，对于一个浮动元素，如果不设定宽度，同样采用&包含块&的渲染方式，宽度取决于内容的宽度。但是，如果这个浮动元素内部有一个右浮动的子元素，宽度会扩展到父容器的宽度。这个就不给出具体的例子了，自己可以下去测试。另外可以表现为&包含块的&还有display:inline-block 当然，IE 如果display inline 如果 has a layout 同样会表现出&包含块&渲染。这里就不深入探讨了。
下面对于position:absolute or fixed 定位的&包含块&，做一个渲染测试。
&!DOCTYPE HTML&
&meta charset="gb2312"&
&title&无标题文档&/title&
*{padding:0;margin:0}
&div style="height:200position: background:#FF9900;left:0;right:0"&内容测试&/div&
下面效果图：
但这里我要郑重宣布：IE6除外！经测试：经测试：IE7+、firefox、chrome、safari、opera均遵从此解析模式！IE怪异模式下是不遵从这个原则的。
如果不准备兼容IE6，相信已经可以到此为止了，我不想批评IE6。因为它在整个浏览发展历程中是个代表，也是个经典。没有一款浏览能在如此长的时间在市场上占据如此高的地位。
这当然也得益于它的与xp捆绑推广策略。但是，就近年web的发展趋势来看，IE6已经成为一个负担。就连微软也力不从心。
好了关于IE6我不想多谈什么。因为就目前国内的形式而言，完全放弃IE6只是一个美好的期望。
我们看下IE6下的效果：
显然中高的高度超出了预期。显然，不应该出现滚动条。需要body或者html overflow:hidden。
&!DOCTYPE HTML&
&meta charset="gb2312"&
&title&头尾固定中间高度自适应布局&/title&
html, body {
height:<span style="background-color: #f5f5f5; color: #%;
padding:0;
overflow:hidden
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:5;
text-align:center;
background:#FC0;
width:<span style="background-color: #f5f5f5; color: #%;
overflow:auto;
top:<span style="background-color: #f5f5f5; color: #px;
position:absolute;
z-index:10;
bottom:<span style="background-color: #f5f5f5; color: #px;
_height:<span style="background-color: #f5f5f5; color: #%
.mycontent {
padding:20px;
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:<span style="background-color: #f5f5f5; color: #;
text-align:center;
&div id="dHead"&固定头部100&/div&
&div id="dBody"&
&div class="mycontent"& 中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
&div id="dFoot"&固定尾部100px&/div&
看下面效果图：
看右下角显然主体部分被挡住了，并没达到我们想要的预期！结合两种IE6下的效果表现。其实，可以归结为height:100%造成的。也可以归结于w3c的盒子模型；
这里简单的介绍一下IE与W3C两种不同中的盒子模型：
先看一下面两种盒子的解析图：
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
IE的盒子模型后来修复掉了，在标准模式下是表现w3c盒子模型的，在quirks模式下表现自己的盒子模型。
如果在IE6盒子模型下，设定BODY的padding哪么剩余的高度被主体部分继承，就符合我们的预期了；
（当然css3中有box-sizing可以改变盒子的模型，从这方面看IE6的盒子模型，是符合逻辑的。连w3c都做了兼容吸收）
那现在就是怎么触发IE6的quirks的问题了。
这里我只说几种常见的方法,其它方法，读者自已搜索：
1、 去除掉DOCTYPE声明，显然这不是我们想看到的结果；
2、DOCTYPE 之前有一个&&声明：&?xml version="1.0" encoding="GBK"?&，这只是针对IE6的方式；
3、如果 DOCTYPE 之前有任何语句，quirks 模式在任何版本的 IE 中（截至&）同样会被触发，例如：
&!-- This comment will put IE 6, 7, 8, and 9 in quirks mode --&加一个注释
我这里采用了第二种方式，其实第三种方式更合理些，因为我们不想触发quirks模式，造成浏览的不一致。但现在我们只需要在IE6下触发quirks模式，所以采用了第二种方法。
&?xml version="1.0" encoding="GBK"?&
&!DOCTYPE html&
&meta charset="gb2312"&
&title&头尾固定中间高度自适应布局&/title&
html,body{height:<span style="background-color: #f5f5f5; color: #%;}
overflow:hidden;
_padding:<span style="background-color: #f5f5f5; color: #px 0;
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:5;
text-align:center;
background:#FC0;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:<span style="background-color: #f5f5f5; color: #;
top:<span style="background-color: #f5f5f5; color: #px;
bottom:<span style="background-color: #f5f5f5; color: #px;
overflow:auto;
_position:relative;
_bottom:0;
_height:<span style="background-color: #f5f5f5; color: #%;
_overflow:auto
.mycontent {
padding:20px;
height:<span style="background-color: #f5f5f5; color: #px;
line-height:<span style="background-color: #f5f5f5; color: #px;
background:#690;
width:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
z-index:<span style="background-color: #f5f5f5; color: #;
text-align:center;
&div id="dHead"&固定头部100&/div&
&div id="dBody"&
&div class="mycontent"& 中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分-----------------------------------&br&
&div id="dFoot"&固定尾部100px&/div&
经测试达到预期！这样我们想要的结果都有了。当然如果，不设定body的padding设dBody的上下border也是一样的，这个留给读者自己下去自己测试吧。这里就不贴Demo了。
缺点：为ie6做了太多的bug处理，同时还触发了IE6的怪异模式，使得盒子解析模式跟W3C不符，这样会影其它版块的盒子书写。
&方法二：利用boxsizing改变盒子模型
&其实，第二种方法跟第一种方法，有部分重叠。其中&滋味&，读者自己体会吧！万变不离其宗。
其实这个方法是蓝色理想上看到的一办法。
实现原理是，先为html设定box-sizing然后，加上上下padding值。布局模块均采用position:relative定位。
然后，头部采用负向margin向上平移（因为有了html padding），如查采用负top的话需要为每个布局版加上负看实现代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="author" content="Chomo" /&
&link rel="start" href="" title="Home" /&
&title&利用box-sizing实现div仿框架&/title&
&style type="text/css"&
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:<span style="background-color: #f5f5f5; color: #px 0;
overflow:hidden;
html, body {
height:<span style="background-color: #f5f5f5; color: #%;
position:relative;
top:-100px;
height:<span style="background-color: #f5f5f5; color: #px;
background:#f60;
top:-100px;
position:relative;
height:<span style="background-color: #f5f5f5; color: #%;
background:#fc0;
overflow:auto;
width:<span style="background-color: #f5f5f5; color: #px;
float:left;
margin-right:0 !important;
margin-right:-3px;
overflow:auto;
top:-100px;
position:relative;
overflow:auto;
height:<span style="background-color: #f5f5f5; color: #%;
background:#f30;
top:-100px;
position:relative;
height:<span style="background-color: #f5f5f5; color: #px;
background:#f60;
clear:both;
&div class="top"& top &/div&
&div class="side"& side &br /&
&div class="main"& main &br /&
&div class="bottom"& bottom &/div&
了解box-sizing的同学们应该知道，它来自离微国比较遥远的css3世界，因此IE6/IE7是不支持的，但经过验证正常兼容IE6/IE7。
IE6/IE7下，&html&的box-sizing默认值本就是border-box（注：IE7有一点点不正常，overflow:hidden后神志有所恢复）。
这种方法看起更加完美，因为它不用触发ie6的怪异模式，不会影响整体布局。
另外如果给头部是absolute定位的话也是可以实现的。
&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="author" content="Chomo" /&
&link rel="start" href="" title="Home" /&
&title&利用box-sizing实现div仿框架&/title&
&style type="text/css"&
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:<span style="background-color: #f5f5f5; color: #px 0;
overflow:hidden;
html, body {
height:<span style="background-color: #f5f5f5; color: #%;
position:absolute;
width:<span style="background-color: #f5f5f5; color: #%;
height:<span style="background-color: #f5f5f5; color: #px;
background:#f60;
height:<span style="background-color: #f5f5f5; color: #%;
background:#fc0;
width:<span style="background-color: #f5f5f5; color: #px;
float:left;
margin-right:0 !important;
margin-right:-3px;
overflow:auto;
overflow:auto;
height:<span style="background-color: #f5f5f5; color: #%;
background:#f30;
position:relative;
height:<span style="background-color: #f5f5f5; color: #px;
background:#f60;
clear:both;
&div class="top"& top &/div&
&div class="side"& side &br /&
&div class="main"& main &br /&
&div class="bottom"& bottom &/div&
&方法三：这个方法其实是从方法一和方法二结合实现的
&其它浏览器依然采用position定位，不设高度，然后，触发&包含块&的尺寸。
IE6下，采用html的box-sizing默认为box-border来实现。具体的原理上面都已经讲过了直接上代码：
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&头尾固定的自适应内容布局&/title&
&style type="text/css"&
padding:0;
_padding:<span style="background-color: #f5f5f5; color: #px 0 100px 0;
_overflow:hidden;
html,body {
height:<span style="background-color: #f5f5f5; color: #%;
width:<span style="background-color: #f5f5f5; color: #%;
background:#FF8C00;
width:<span style="background-color: #f5f5f5; color: #%;
overflow:auto;
position:absolute;
z-index:20;
top:<span style="background-color: #f5f5f5; color: #px;
bottom:<span style="background-color: #f5f5f5; color: #px;
_height:<span style="background-color: #f5f5f5; color: #%;
height:<span style="background-color: #f5f5f5; color: #px;
width:<span style="background-color: #f5f5f5; color: #%;
background:#6B8E23;
position: absolute;
z-index:<span style="background-color: #f5f5f5; color: #
height:<span style="background-color: #f5f5f5; color: #px;
width:<span style="background-color: #f5f5f5; color: #%;
background: #EE4063;
position: absolute;
z-index:<span style="background-color: #f5f5f5; color: #
&div class="top"&固定头部100&/div&
&div class="wrap"&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分&br&
中间自适应部分-----------------------------------&br&
&div class="footer"&固定尾部100px&/div&
这里就不重复发效果图了，有兴趣的可以测试一下demo。
优点：不用触发怪异模式
缺点：为IE6加了hack
方法四: 设置,主体部分的box-sizing
思路一旦打开,解决问题的办法也就多起来了。既然有box-sizing这个好东西可以利用。那么不如设置主体部分的box-sizing:border-box；然后为主体部分加上上下border，看起来问题同样可以解决。事实也是如此！
看实现代码：
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&头尾固定的自适应内容布局&/title&
&style type="text/css"&
* { margin:0; padding:0; }
html, body { height:<span style="background-color: #f5f5f5; color: #%; width:<span style="background-color: #f5f5f5; color: #%; overflow:hidden }
.wrap { background:#FF8C00; width:<span style="background-color: #f5f5f5; color: #%; overflow-y:scroll; height:<span style="background-color: #f5f5f5; color: #%; position:absolute; top:0; z-index:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-top:<span style="background-color: #f5f5f5; color: #px solid #fff; border-bottom:<span style="background-color: #f5f5f5; color: #px solid #fff; }
.top { height:<span style="background-color: #f5f5f5; color: #px; width:<span style="background-color: #f5f5f5; color: #%; background:#6B8E23; position:absolute; top:0; left:0; z-index:<span style="background-color: #f5f5f5; color: #; }
.footer { height:<span style="background-color: #f5f5f5; color: #px; width:<span style="background-color: #f5f5f5; color: #%; background: #EE4063; position: absolute; bottom:0; left:0; z-index:<span style="background-color: #f5f5f5; color: # }
&div class="top"&
固定头部100
&div class="wrap"&
中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分&br& 中间自适应部分-----------------------------------&br&
&div class="footer"&
固定尾部100px
经测试，确实可以。问题在于IE 6/7这两个不支持box-sizing。
但有解决办法，这里说两个常用的办法：
1 依然是触发IE的怪异模式，采用上面说的第三种办法，因为要兼容IE 6/7两个条件：&!--quirks IE 6/7--&；
2 采用boxsizing.htc的方式，让IE 6/7支持box-sizing。至于选哪个，这是见仁见智的事情了。这里附下：下载地址
&这里我就不发，具体代码了，自己去测试一下吧。
方法五：js来设置中间的高度
对于这种办法，我就不多说了，相信大部同学都是可以很轻松的搞定的！
至于采用哪种模式，自己选择吧
阅读(...) 评论()