css经典布局——头尾固定高度中间高度自适应布局===

1、css经典布局头尾固定高度中间高度自适应布局下面说下要求：1头部固定高度，宽度100%自适应父容器；2底部固定高度，宽度100%自适应父容器；3中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条4整个内容填满浏览器可视区域，并且不超出此区域！先看下效果图：相信，做过两年前端的同学，拿到这个需求，者階一个感觉一这挺简单的！是的，本来就挺简单！方法一：position:absolute定位，不设高，并改变包含块的尺寸渲染从我脑海崩出来的第一个念头就是定位布局position而我也是这么做的，因为要固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以

2、调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半。上代码，相信这也是符合大部分思路的实现方式：v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle头尾固定中间高度自适应布局v/titlehtml,bodyheight:100%;margin:。；padding:。#dHeadheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-in

3、dex:5;top:0;text-align:center;#dBodybackground:#FC0;width:100%;overflow:auto;top:100px;position:absolute;z-index:10;bo”:.mycontent；#dFootheight:100px;line-height:lOOpx;background:#690;width:1OO%;position:absolute;z-index:200;bottom:。；text-align:center;固定头部100px;中间自适应部分中间自适应部分divid=dFoot、固定尾部100px结果也

4、如上图所示，预期已经达到。经测试：IE7+、firefox、chrome、safari、opera均通过测试！_当容器被_或者fl的时候，在_v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle无标题文档v/title*padding:O;margin:O内容测试看下效果图：IL无沪容测试我的电脑需要说明的是，对于一个浮动元素，如果不设定宽度，同样采用包含块的渲染方式，宽度取决于内容的宽度。但是，如果这个浮动元素内咅階一个右浮动的子元素，宽度会扩展到父容器的宽度。这个就不给出具体的例子了，自己可以下去测试。另外可以表现为包含块的还有display:i

5、nline-block当然，IE如果displayinline如果hasalayout同样会表现出包含块渲染。这里就不深入探讨了。下面对于position:absoluteorfixed定位的包含块，做一个渲染测试。但是如果在position:absolute下，同时设定left和right或者同时设定top和bottom的话。宽度和高会被拉伸到指定位置，需要说明的这就是宽度或者高度缺省时position:absoluteorfixed情况下，浏览器对容器的尺寸解析方式。v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle无标题文档v/title*p

6、adding:O;margin:O内容测试僵+贡面电妄全工眞电八C：tDocumenandSettingzaAAdinnistrator.V收藏夹建谀丽站煜免费Hotmail烂菽取更旁附加模塩”迅盘看看-中伺第一高涪.|ooH爲【原我们看下IE6下的效果：我们看下IE6下的效果：下面效果图：eSdJfC：VloeujnnteandSettLRgEA.dfflirkiEtrator.|：|Xj/丿LivsSt：=chpT文件叮輪辑|卫jrc3?*IJ,I.n、I1E3*xSI?FlIrXJ童看（j恢郦兴l.A）工具辽ffi-Kg辺）TTi|iTcr建IS冋站T邑免费比论订皂義取更枣附加複块T迅雷

7、看看中国第一咼清1霁it磨头恳r;.霹【原|倉无x|T0-E.CTQT页面（IX安全”工具电t0t能兗成我的电胞令f闻icm但这里我要郑重宣布：IE6除外！经测试：经测试：IE7+、firefox、chrome、safari、opera均遵从此解析模式！IE怪异模式下是不遵从这个原则的。如果不准备兼容IE6，相信已经可以到此为止了，我不想批评IE6。因为它在整个浏览发展历程中是个代表，也是个经典。没有一款浏览能在如此长的时间在市场上占据如此高的地位。这当然也得益于它的与xp捆绑推广策略。但是，就近年web的发展趋势来看，IE6已经成为一个负担。就连微软也力不从心。好了关于IE6我不想多谈什么。

8、因为就目前国内的形式而言，完全放弃IE6只是一个美好的期望。显然中高的高度超出了预期。显然，不应该出现滚动条。需要body或者htmloverflow:hidden。v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle头尾固定中间高度自适应布局v/titlehtml,bodyheight:100%;margin:。；padding:。；overflow:hidden#dHeadheight:100px;line-height:lOOpx;background:#690;width:1OO%;position:absolute;z-index:5;to

9、p:0;text-align:center;#dBodybackground:#FCO;width:100%;overflow:auto;top:100px;position:absolute;z-index:10;bottom:100px;_height:100%_#dFootheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:200;bottom:。；text-align:center;v/headvbodyvdivid=dHead固定头部100px;v/div中间自适应部分

10、中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr

11、中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbrv/divv/divvdivid=dFoot、固定尾部100pxv/divv/bodyv/html看下面效果图：1r仝_?ifIS严片i*主妄耐底益折逑IET-IE5.5IE7IESMI*MBaM固定头部margin-topborder-toppaddingtoppEiddm；bottoniborder-bottommarfjinbottomcontent-Done看右下角显然主体部分被挡住了，并

12、没达到我们想要的预期！结合两种IE6下的效果表现。其实，可以归结为height:100%造成的。也可以归结于w3c的盒子模型；这里简单的介绍一下IE与W3C两种不同中的盒子模型：先看一下面两种盒子的解析图：mCJM=rahrbonjeTHghtT标准盒子模型margintoppadding-eftborder-toppaddingtopcontentpaddingbottomborder-bottompadc-inE-sbodeicruhtmargin-bottom；width；从上图可以看到IE盒子模型的范围也包括margin、border、padding、content，和标准W3C盒子模

13、型不同的是：IE盒子模型的content部分包含了border和pading。IE的盒子模型后来修复掉了，在标准模式下是表现w3c盒子模型的，在quirks模式下表现自己的盒子模型。如果在IE6盒子模型下，设定BODY的padding哪么剩余的高度被主体部分继承，就符合我们的预期了；（当然css3中有box-sizing可以改变盒子的模型，从这方面看IE6的盒子模型，是符合逻辑的。连w3c都做了兼容吸收）那现在就是怎么触发IE6的quirks的问题了。这里我只说几种常见的方法，其它方法，读者自已搜索：1、去除掉DOCTYPE声明，显然这不是我们想看到的结果；2、DOCTYPE之前有一个XML声

14、明：，这只是针对IE6的方式；3、如果DOCTYPE之前有任何语句，quirks模式在任何版本的IE中（截至归9）同样会被触发，例如：加一个注释我这里采用了第二种方式，其实第三种方式更合理些，因为我们不想触发quirks模式，造成浏览的不一致。但现在我们只需要在IE6下触发quirks模式，所以采用了第二种方法。v?xmlversion=1.0encoding=GBK?v!DOCTYPEhtmlvhtmlvmetacharset=gb2312头尾固定中间高度自适应布局/titlehtml,bodyheight:100%;bodymargin:。；overflow:hidden;_padding

15、:100px0;#dHeadheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:5;top:0;text-align:center;#dBodybackground:#FC0;width:100%;position:absolute;z-index:100;top:100px;bottom:100px;overflow:auto;.position:relative;_top:0;_bottom:0;_height:100%;_overflow:auto.mycontent；#d

16、Footheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:200;bottom:。；text-align:center;固定头部100px;中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分中间自适应部分background:#f60;中间自适应部分vbr中间自适应部分vbr中间自适应部分vb

17、r中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbr中间自适应部分vbrv/divv/divvdivid=dFoot、固定尾部100pxv/divv/bodyv/html经测试达到预期！这样我们想要的结果都有了。当然如果，不设定body的padding设dBody的上下

18、border也是一样的，这个留给读者自己下去自己测试吧。这里就不贴Demo了。缺点：为ie6做了太多的bug处理，同时还触发了IE6的怪异模式，使得盒子解析模式跟W3C不符，这样会影其它版块的盒子书写。方法二：利用boxsizing改变盒子模型其实，第二种方法跟第一种方法，有部分重叠。其中滋味，读者自己体会吧！万变不离其宗。其实这个方法是蓝色理想上看到的一办法。实现原理是，先为html设定box-sizing然后，加上上下padding值。布局模块均采用position:relative定位。然后，头部采用负向margin向上平移（因为有了htmlpadding），如查采用负top的话需要为每

19、个布局版加上负top;看实现代码：v!DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN HYPERLINK /TR/xhtmll/DTD/xhtmll-transitiona /TR/xhtmll/DTD/xhtmll-transitional.dtdvhtmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlvmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/vmetaname=authorcontent=Chomo/vlinkrel=start

20、href= HYPERLINK title=Home/利用box-sizing实现div仿框架vstyletype=text/css*margin:。；padding:。；html-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;html,bodyheight:100%;.topposition:relative;top:-100px;height:100px;.sidetop:-100px;position:relative

21、;height:100%;background:#fcO;overflow:auto;width:200px;float:left;margin-right:Oimportant;margin-right:-3px;overflow:auto;.top:-100px;position:relative;overflow:auto;height:100%;.bottomtop:-100px;position:relative;height:100px;background:#f60;clear:both;topside了解box-sizing的同学们应该知道，它来自离微国比较遥远的css3世界，

22、因此IE6/IE7是不支持的，但经过验证正常兼容IE6/IE7。IE6/IE7下，vhtmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlvmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/vmetaname=authorcontent=Chomo/vlinkrel=starthref= HYPERLINK title=Home/利用box-sizing实现div仿框架vstyletype=text/css*margin:。；padding:。；L-webkit-box-sizing:bord

23、er-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;圖bodyi.topposition:absolute;top:0;left:0;width:100%;height:100px;.sideheight:100%;background:#fcO;width:200px;float:left;margin-right:Oimportant;margin-right:-3px;overflow:auto;ioverflow:auto;height:100%;.bottomposition:relative;height:100px;background:#f60;clear:both;topside方法三：这个方法其实是从方法一和方法二结合实现的其它浏览器依然采用position定位，不设高度，然后，触发包含块的尺寸。IE6下，采用html的5眩