1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
3 <head>
4 <title>自由伸展的三栏式版面</title>
5 <meta name="Big John" content="August 24, 2002" />
6 <meta http-equiv="content-Type" content="text/html; charset=GB2312" />
7 <meta name="mssmarttagspreventparsing" content="true" />
8 <meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
9 <meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
10 <meta name="distribution" content="global" />
11 <meta name="resource-type" content="document" />
12 <meta name="robots" content="all" />
13 <meta http-equiv="imagetoolbar" content="no" />
14 <meta http-equiv="pragma" content="no-cache" />
15
16 <style type="text/css">
17 <!--
18 html {margin: 0; padding: 0;}
19
20 body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
21 font-size: small; color:#333;background: #ee8 repeat-y url(images/browncol.gif);}
22 /*** Image is 180px wide, and 20px high ***/
23
24 pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}
25
26 a {color: #000;}
27
28 .alignright {margin-top: 0; text-align: right;}
29
30 .small {font-size: .9em;}
31
32 .return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
33
34 /*******************************************************************************
35 Positioning rules
36 *******************************************************************************/
37 h1, h2 {
38 font-size: 22px;
39 margin: 0;
40 color: #040;
41 background-color: #c83; /*** The header and footer have backgrounds, to cover the 2-tone body BG ***/
42 border-top: 4px solid #000;
43 border-bottom: 5px solid #000;
44 padding: 3px 0 3px 1em;
45 }
46
47 h2 {background-color: #638; color: #fff;}
48
49 div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
50 position: absolute;
51 left: 10px;
52 width: 150px;
53 color: #333;
54 padding-top: 10px;
55 }
56
57 #middlebox {
58 margin: 0 34% 0 170px;
59 border-left: 3px solid #000;
60 border-right: 3px solid #000;
61 padding: 10px;
62 background-color: #dda; /*** This div has a background to cover the 2-tone body BG ***/
63 }
64
65 div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
66 position: absolute;
67 right: 25px; /*** IE5/mac will show a horizontal scrollbar
68 if this is less than 16px, or other units are used
69 http://www.l-c-n.com/IE5tests/right_pos/ ***/
70 width: 30%;
71 color: #820;
72 padding-top: 10px;
73 }
74 -->
75 </style>
76 </head>
77 <body>
78 <h1>
79 自由伸展的三栏式版面（Three Column Stretch）（页首）
80 </h1>
81 <div id="leftbox">
82 <pre>
83 <strong>#leftbox</strong> {
84 position: absolute;
85 left: 10px;
86 180px(150px?);
87 }
88 </pre>
89 <p>
90 <strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。
91 <p>
92 </p>
93 这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的“宽度(width)”值。
94 </p>
95 <p>
96 <a href="#"><strong>测试用连结</strong></a>
97 </p>
98 </div>
99 <div id="rightbox">
100 <pre>
101 <strong>#rightbox</strong> {
102 position: absolute;
103 right: 2%;
104 30%;
105 }
106 </pre>
107 <p>
108 <strong>这个栏段</strong>也能显示“body”的背景，但是因为“body”的背景
109 图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是“body”的背景颜色(background-color)。
110 这个栏段的“宽度(width)”和右边界的区域是用百分比作单位，你想用其它单位也可以。
111 </p>
112 <p>
113 假如页面比 640px 还窄，中间和右边栏段使用的“pre”卷标会导致内容重叠。 //
114 </p>
115 <p>
116 <a href="#"><strong>测试用连结</strong></a>
117 </p>
118
119 </div>
120
121 <div id="middlebox">
122
123 <div class="return">
124 <a href="index.html"><strong>返回 p.i.e.</strong></a>
125 </div>
126
127 <pre>
128 <strong>#middlebox</strong> {
129 margin: 0 34% 0 170px;
130 border-left: 2px solid #000;
131 border-right: 2px solid #000;
132 padding: 0 10px 10px;
133 background-color: #6b9;
134 }
135 </pre>
136 <p>
137 <strong>中间栏段</strong>有设定背景色，以便跟右边栏段作区分。
138 这个栏段也需要补白(padding)和边框(border)，不过因为没有设定“宽度(width)”属性，并不会触发 IE5.x 的区块模块(box model)问题。
139 </p>
140 <p>
141 这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则“body”的背景就会在页尾(footer)下方出现。
142 </p>
143
144 <p>
145 <strong>这整个范例</strong>没有在任何栏段里宣告“高度(height)”属性，这是为了避掉一些浏览器表现“高度(height)”属性的独特方式。
146 因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。
147 </p>
148 <p>
149 页首、页尾和中间栏段是“固定的(static)”（或说“相对的(relative)”），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定“高度(height)”。
150 </p>
151 <p>
152 在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，
153 因此这些 div 的“top”属性可以忽略。
154 这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。
155 所以假如页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？
156 </p>
157 <p>
158 <strong>Mozilla 中</strong>，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，
159 <a href="mozshift.html">这个范例</a>描述得更具体。
160 </p>
161
162 <p>
163
164 <strong>Nav4 中</strong>没办法使用像“div#leftbox”这类语法，所以请用“#leftbox”来代替。我的写法只是为了要明确地表示。
165 </p>
166 <p>
167 <strong>致谢：</strong>再次感谢<a href="http://www.l-c-n.com/">Philippe Wittenbergh</a>
168 ，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong>
169 <a href="http://www.mark.ac/help/">Mark Howells</a>
170 ，因为他提供了最初的 body 背景点子。
171 </p>
172
173 <p class="small alignright">
174 <a href="http://users.rraz.net/mc_on_the_rocks/"
175 title=" My mountain bike site "><strong>Big John</strong></a>
176
177 <a href="mailto:johnthebig66@yahoo.com" title="If you've found something new and
178 interesting to say about any CSS subject, please contact me. I want to know! ">e-mail</a>
179 ©positioniseverything<br/>
180 最后更新日期： September 6, 2002<br/>
181 Created August 24, 2002
182 </p>
183 <p class="small alignright">
184 <a href="http://ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁体中文翻译：</a><strong>yyhuang</strong><br/>
185
186 简体中文转换:<br/>
187 <a href="http://www.onestab.net/"><strong>onestab</strong></a>
188 <br/>
189 <p>
190 <strong>以下是填满栏段用的</strong><br/><br/>
191 Why don't cannibals eat clowns?<br/>
192 Answer: They taste funny.<br/><br/>
193 What is the difference between a lousy golfer and a lousy skydiver?<br/>
194
195 Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!<br/><br/>
196
197 Did you hear about the geneticist that tried to cross a potato and a chicken?<br/>
198 He wanted to produce a chicken that would definitely NOT cross the road, but instead,
199 got a bunch of potatoes that sat around pecking eachother's eyes out.<br/><br/>
200 How many Psychiatrists does it take to change a light bulb?<br/>
201 Answer: Only one, but the bulb has to really <em>want</em> to change.<br/><br/>
202 Why did the egg cross the road?<br/>
203 Answer: It had an inclination.
204 </p>
205
206 </div>
207
208 <h2>
209 自由伸展的三栏式版面（Three Column Stretch）（页尾）
210 </h2>
211 </body>
212 </html>