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

资源描述

《课题css经典布局头尾固定高度中间高度自适应布局.docx》由会员分享，可在线阅读，更多相关《课题css经典布局头尾固定高度中间高度自适应布局.docx（37页珍藏版）》请在冰豆网上搜索。

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

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

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

下面说下要求：

1头部固定高度，宽度100%自适应父容器；

2底部固定高度，宽度100%自适应父容器；

3中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；

4整个内容填满浏览器可视区域，并且不超出此区域！

先看下效果图：

相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！

是的，本来就挺简单！

方法一：

position:

absolute定位，不设高，并改变"包含块"的尺寸渲染

从我脑海崩出来的第一个念头就是定位布局——position

而我也是这么做的，因为要固定头尾，所以，至少头和尾要用到position定位。

因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，

这就决定是中间主体部分的高度不固定。

所以真正的问题核心也正在此。

解决了这个问题，整个布局也就解决了一多半。

上代码，相信这也是符合大部分思路的实现方式：

DOCTYPEHTML>

头尾固定中间高度自适应布局

固定头部100px;

中间自适应部分

leftorright的时候，在没有设定宽度的情况下窗口的表现为紧贴内容；

宽度和高会被拉伸到指定位置，需要说明的这就是宽度或者高度缺省时position:

需要说明的是，对于一个浮动元素，如果不设定宽度，同样采用“包含块”的渲染方式，宽度取决于内容的宽度。

但是，如果这个浮动元素内部有一个右浮动的子元素，宽度会扩展到父容器的宽度。

inline-block当然，IE如果displayinline如果hasalayout同样会表现出“包含块”渲染。

如果不准备兼容IE6，相信已经可以到此为止了，我不想批评IE6。

没有一款浏览能在如此长的时间在市场上占据如此高的地位。

因为就目前国内的形式而言，完全放弃IE6只是一个美好的期望。

看右下角显然主体部分被挡住了，并没达到我们想要的预期！

从上图可以看到IE盒子模型的范围也包括margin、border、padding、content，和标准W3C盒子模型不同的是：

IE的盒子模型后来修复掉了，在标准模式下是表现w3c盒子模型的，在quirks模式下表现自己的盒子模型。

如果在IE6盒子模型下，设定BODY的padding哪么剩余的高度被主体部分继承，就符合我们的预期了；

（当然css3中有box-sizing可以改变盒子的模型，从这方面看IE6的盒子模型，是符合逻辑的。

3、如果DOCTYPE之前有任何语句，quirks模式在任何版本的IE中（截至 IE9）同样会被触发，例如：

我这里采用了第二种方式，其实第三种方式更合理些，因为我们不想触发quirks模式，造成浏览的不一致。

但现在我们只需要在IE6下触发quirks模式，所以采用了第二种方法。

当然如果，不设定body的padding设dBody的上下border也是一样的，这个留给读者自己下去自己测试吧。

为ie6做了太多的bug处理，同时还触发了IE6的怪异模式，使得盒子解析模式跟W3C不符，这样会影其它版块的盒子书写。

然后，头部采用负向margin向上平移（因为有了htmlpadding），如查采用负top的话需要为每个布局版加上负top;看实现代码：