头痛的layout

　　日前想做几个布局模板，和同事讨论了一下，自己商定了一些需求。

1.第一个，做一个如图所示的布局：

要求内容小于窗口的时候，背景能延伸整个页面，内容大于窗口的时候，背景能自动延展。

代码如下，也可以试着自己修改一下再看效果：

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style></style> </head> <body> <div id="main"> <div>我们是害虫</div> <div>我们是害虫</div> </div> </body> </html>

几点解释：

测试了主流浏览器，应该都能兼容。
支持标准模式和怪癖模式。
因为height的默认值是auto，这里需要给html和body设置height: 100%，否则达不到整个窗口大小。
#main的margin:auto是用来使main水平方向自动居中的，注意，只会影响水平方向。
* html body的text-align: center是为了在ie的怪癖模式下达到同样效果，有个等价的写法，_text-align: center，但是后者不能通过w3c验证。
#main的min-height: 100%和* html #main { height: 100%; }是为了使main的高度自适应窗口，有几种等价的写法，
#main {
_height: 100%;
min-height: 100%;
}
以及网上流行的：
#main {
height: auto !important;
height: 100%;
min-height: 100%;
}
当然，更完备的写法应该加入height: auto !important这句，即各个属性都需要加上!important后缀，以防止div{height:200px;}这类覆盖问题出现，但如果都是自己写的css，可以人为的避免这种问题，所以省略了。
除ie6以外的浏览器在标准模式下应该使用height:auto;min-height:100%;来达到效果。ie6虽然不支持min-height, 但height渲染规则近似于min-height，所以只需要height:100%即可，怪癖模式下的ie浏览器也是如此。
* html #main的text-align: left是为了修正ie6及ie7,8怪癖模式下text-align会继承body的text-align的问题。

利用css hack技术，就有了上述代码。

2.在第一个布局的基础上，再做点改动，如图所示：

可以看到上下多了些空白出来。

代码如下：

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style></style> </head> <body> <div id="wrapper"> <div id="main"> <div>我们是来福灵</div> <div>我们是来福灵</div> </div> </div>   </body> </html>

这个布局虽然只比第一种布局多了上下的空白，但实际上难度加大了不少。

经过不少时间思考以及比较尝试了几个不同方案之后，最终得出了上面的代码。

几点解释：

测试了主流浏览器，应该都能兼容。
支持标准模式和怪癖模式。
利用负边距，
#main中设定padding: 0 0 2000px及margin: 20px 0 -2000px
同时，配合#wrapper中的overflow: hidden以及* html #wrapper的overflow: visible
使得#main可以自动适应窗口高度。
关于负边距以及边距合并的问题，可能以后会另开文叙述，也可自己上网搜索。
同样是负边距，
#wrapper的margin: -10px auto使得wrapper向上位移了10px。
实现底部空白相对比较复杂。
- 除ie外的主流浏览器都支持:after，所以可以用body:after的content:"",display:block和height: 20px实现。
- 对于ie，使用ie的条件判断技术，在底部加入footer_wrapper。
- ie8标准模式，#footer_wrapper的height: 0 !important避免高度加倍。
- ie7标准模式，*+html #footer_wrapper的height: 20px !important将高度设置回来。
- ie6及ie7,8怪癖模式，因为不识别important，则height: 20px。
由于wrapper已经向上位移了10px，所以#main设定20px的上边距，合并后的边距为10px。
#main的zoom: 1为了修复ie7标准模式下背景不自动延伸的问题，用width: 100%之类的同样可以。
* html #wrapper的text-align: left的理由参考第一个布局的解释。
如果采用#wrapper的position:relative及top:-10px，可以不需要额外的footer_wrapper，但是在ie6下面会和#main的padding,margin冲突，所以舍弃。

下面是之前的一个方案，已经出局，列在这边仅供参考比较。

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style></style> </head> <body> <div id="wrapper_top"></div> <div id="wrapper"> <div id="main"> 我们是来福灵 <br> 我们是来福灵 </div> </div> <div id="wrapper_end"></div> </body> </html>

给出具体的思路：

因为必须要设定#wrapper的min-height或height为100%才能满足自适应的要求，但是box-sizing又不被ie支持，所以只好采用取巧的方法，拿上下两个div盖住，并设成和body一样的颜色，来模拟这个效果。

同样几点解释：

测试了主流浏览器，应该都能兼容。
支持标准模式和怪癖模式。
#wrapper_top和#wrapper_end采用padding来占用高度，而不用height:10px，避免了ie下的问题。
#wrapper的margin: -10px auto，使得top和end两个div可以与自身重叠，避免额外的高度。
#wrapper的background设置了10px的位移以修正margin: -10px auto。
#wrapper_top加上position: relative用以让自己处于#wrapper的上方。

欲知后事如何，请听下回分解。

posted on 2010-01-19 21:12 nozer0 阅读(578) 评论(0) 编辑收藏举报

刷新页面返回顶部

虚度人生

导航

公告