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

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