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;