css经典布局——头尾固定高度中间高度自适应布局剖析.docxVIP

现在开始正式谈论这个经典布局——?头尾固定高度中间高度自适应布局下面说下要求：1 头部固定高度，宽度100%自适应父容器；2 底部固定高度，宽度100%自适应父容器；3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；4 整个内容填满浏览器可视区域，并且不超出此区域！先看下效果图：?相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！是的，本来就挺简单！方法一：position:absolute定位，不设高，并改变包含块的尺寸渲染从我脑海崩出来的第一个念头就是定位布局——position而我也是这么做的，因为要固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半。上代码，相信这也是符合大部分思路的实现方式：!DOCTYPE HTMLhtmlheadmeta charset=gb2312title头尾固定中间高度自适应布局/titlestylehtml, body { height:100%; margin:0; padding:0}#dHead { height:100px; line-height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; text-align:center;}#dBody { background:#FC0; width:100%; overflow:auto; top:100px; position:absolute; z-index:10; bottom:100px;}.mycontent { padding:20px;}#dFoot { height:100px; line-height:100px; background:#690; width:100%; position:absolute; z-index:200; bottom:0; text-align:center;}/style/headbodydiv id=dHead固定头部100px;/divdiv 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/divdiv id=dFoot固定尾部100px/div/body/html结果也如上图所示，预期已经达到。经测试：IE7+、firefox、chrome、safari、opera均通过测试！这里有点要特别说明的地方：当容器被position:absolute或者float:left or right的时候，在没有设定宽度的情况下窗口的表现为紧贴内容；!DOCTYPE HTMLhtmlheadmeta charset=gb2312title无标题文档/titlestyle*{padding:0;margin:0}/style/headbodydiv style=height:200px;position:absolute; background:#FF9900;内容测试/div/body/html?看下效果图：但是如果在position:absolute下，同时设定left和right或者同时设定top和bottom的话。宽度和高会被拉伸到指定位置，需要说明的这就是宽度或者高度缺省时position:absolute or fixed 情况下，浏览器对容器的尺寸解析方式。需要说明的是，对于一个浮动元素，如果不设定宽度，同样采用“包含块”的渲染方式