|
最典型实用的上中下，并且中间分三列的布局，这个例子有2个特点：1. 中间三列效果，可以任意实现单列背景色。
2. 整体最窄770px，最宽1024px，也就是说窗口小于770xp就出底部滚动条，如果大于1024px自动屏幕居中。
IE6.0和FF1.5测试通过
分析：
最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有其他布局的穿插，这一层其实写在body内就可以，少一层嵌套。
#wrapper width：auto； border：1px solid #000； min-width：770px； max-width：1024px； text-align：left； margin-left：auto； margin-right：auto； position：relative；
wrapper 下级的 outer header footer
其中header绝对定位，footer 相对定位；outer分别对左右有130px的外边距，这是兼容非IE的关键。
#outer margin-left：130px； margin-right：130px； background：silver； border-left：1px solid #000； border-right：1px solid #000； color： #000；#header position：absolute； top：0； left：0； width：100%； height：70px； line-height：70px； border-bottom：1px solid #000； overflow：hidden； background：#0ff； text-align：center； font-size：xx-large #footer width：100%； clear：both； line-height：50px； border-top：1px solid #000； background：#ffc； color：#000； text-align：center； position：relative；outer 下级的 clearheader outerwrap right clearer
clearheader 用做填补header的空白，clearer 是一个常用的填充hack用法。
outerwrap 宽为什么是99%，而不是100%？因为他的上层outer有边框，100%宽再加2个边框象素就会撑大，FF有明显效果。
right 的处理很经典，IE下解析为定位，FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。
#clearheader height：72px；。outerwrap float：left； width：99%；#right position：relative；width：130px； float：right； left：1px；margin-right：-129px；
* html #right margin-right：-130px； margin-left：-3px。clearer height：1px； overflow：hidden； margin-top：-1px； clear：both；outerwrap 内的 centrecontent left clearer 就很简单了，思路类似上边说明。
<！——[if gte IE 5]> 指定IE5.0及版本以上浏览器有效
使用expression方法实现对IE5.0及以上版本的宽度条件控制。
body width：expression（ documentElement.clientWidth < 770 ？ （documentElement.clientWidth == 0 ？ （body.clientWidth < 770 ？ "770" ： "auto"） ： "770px"） ： "auto" ）；#wrapper width：expression（ documentElement.clientWidth > 1024 ？ （documentElement.clientWidth == 0 ？ （body.clientWidth >1024 ？ "1024" ： "auto"） ： "1024px"） ： "auto" ）；开始只想搞清楚老外是如何实现居中min max的，没想到最后是expression，太失望了，其实这里使用脚本控制更好。另外，老外原文的 Min width of 800px 是错的，CSS定义就是770px，后来截屏确认也是770px.
总的来说这是一个很复杂的布局例子，融合了很多经典用法和定义，同时很传统和实用。类似的复杂布局，四层嵌套实现对于传统布局来说还是比较有优势的。
Referrence：3 col layout with equalising columns and footer
http://www.pmob.co.uk/temp/min-max-3col.htm
附：布局代码
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>最窄770px最宽1024px的经典布局</title> <meta http-equiv="Content-Type" content="text/html； charset=utf-8" />
<style type="text/css">
* margin：0； padding：0；body padding：10px 0 0 0； color：#000； background：#fff； text-align：center；#wrapper width：auto； border：1px solid #000； min-width：770px； max-width：1024px； text-align：left； margin-left：auto； margin-right：auto； position：relative；
#outer margin-left：130px； margin-right：130px； background：silver； border-left：1px solid #000； border-right：1px solid #000； color： #000；#header position：absolute； top：0； left：0； width：100%； height：70px； line-height：70px； border-bottom：1px solid #000； overflow：hidden； background：#0ff； text-align：center； font-size：xx-large #left position：relative；/*ie needs this to show float */ width：130px；float：left；left：-1px；margin-left：-129px；/*must be 1px less than width otherwise won"t push footer down */
* html #left margin-right：-3px；/* 3px jog*/ * html #outer/* 3px jog*/ margin-left：127px； margin-right：127px；p margin-bottom：1em； padding：0 5px
#right position：relative；/*ie needs this to show float */ width：130px； float：right； left：1px；margin-right：-129px；/*must be 1px less than width otherwise won"t push footer down */
* html #right margin-right：-130px； margin-left：-3px/* stop float drop in ie + 3px jog */
#footer width：100%； clear：both； line-height：50px； border-top：1px solid #000； background：#ffc； color：#000； text-align：center； position：relative；#clearheader height：72px；/*needed to make room for header*/ #centrecontent float：right； width：100%； position：relative；
html>body #centrecontent margin：0 -0.5%/*moz needs this*/。outerwrap float：left； width：99%；。clearer height：1px； overflow：hidden； margin-top：-1px； clear：both；
/* mac hide\*/ * html #outer， * html #wrapper，* html #centrecontent height：1% /* end hide */
</style> <！——[if gte IE 5]> <style type="text/css"> body width：expression（ documentElement.clientWidth < 770 ？ （documentElement.clientWidth == 0 ？ （body.clientWidth < 770 ？ "770" ： "auto"） ： "770px"） ： "auto" ）；#wrapper width：expression（ documentElement.clientWidth > 1024 ？ （documentElement.clientWidth == 0 ？ （body.clientWidth >1024 ？ "1024" ： "auto"） ： "1024px"） ： "auto" ）；</style> <！[endif]——> </head>
<body> <div id="wrapper"> <div id="outer">
<div id="clearheader"></div>
<div class="outerwrap">
<div id="centrecontent"> <h1>Min width of 770px and max width of 1024px</h1> <p>centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here content goes here ： </p> </div>
<div id="left"> <p>Left content goes here ： Left content goes here ： Left content goes here ： Left content goes here ： Left content goes here ： Left content goes goes here ： Left content goes here ： </p> </div>
<div class="clearer"></div>
</div>
<！——end outer wrap ——> <div id="right"> <p>Start Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here： Right content goes here ： </p> </div>
<div class="clearer"></div>
</div>
<div id="footer">Footer - | - Footer </div> <div id="header">Header </div>
</div> </body> </html>
| 
