div布局的自由伸展三栏式版面的代码

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>自由伸展的三栏式版面</title> <meta name="Big John" content="August 24, 2002" /> <meta http-equiv="content-Type" content="text/html; charset=GB2312" /><meta name="mssmarttagspreventparsing" content="true" /> <meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me！？" /> <meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " /> <meta name="distribution" content="global" /> <meta name="resource-type" content="document" /> <meta name="robots" content="all" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="pragma" content="no-cache" /> <style type="text/css"></style> </head> <body> <h1> 自由伸展的三栏式版面（Three Column Stretch）（页首） </h1><pre> #leftbox { position: absolute; left: 10px; width: 180px（150px？）; } </pre>这个栏段的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界（margin）相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。 这一栏的内容（#leftbox）以绝对位置（absolutely positioned）的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的"宽度（width）"值。 测试用连结 <pre> #rightbox { position: absolute; right: 2%; width: 30%; } </pre>这个栏段也能显示"body"的背景，但是因为"body"的背景 图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是"body"的背景颜色（background-color）。这个栏段的"宽度（width）"和右边界的区域是用百分比作单位，你想用其它单位也可以。 如果页面比 640px 还窄，中间和右边栏段使用的"pre"卷标会导致内容重叠。 测试用连结 返回 p.i.e.<pre> #middlebox {margin: 0 34% 0 170px; border-left: 2px solid #000; border-right: 2px solid #000; padding: 0 10px 10px; background-color: #6b9; } </pre>中间栏段有设定背景色，以便跟右边栏段作区分。 这个栏段也需要补白（padding）和边框（border），不过因为没有设定"宽度（width）"属性，并不会触发 IE5.x 的区块模块（box model）问题。 这个栏段也必须是最长的栏段，并且用你支持的最大分辨率（resolution）浏览时，仍要能够延伸到检视区（viewport）底端下方，否则"body"的背景就会在页尾（footer）下方出现。 这整个范例没有在任何栏段里宣告"高度（height）"属性，这是为了避掉一些浏览器表现"高度（height）"属性的独特方式。 因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。 页首、页尾和中间栏段是"固定的（static）"（或说"相对的（relative）"），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度（height）"。 在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后， 因此这些 div 的"top"属性可以忽略。 这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。 所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？ Mozilla 中，因为垂直方向的舍入误差（rounding error），在某些分辨率里，页尾下方可能有 1px 的空隙， 这个范例描述得更详细。 Nav4 中没办法使用像"div#leftbox"这类语法，所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。 致谢：再次感谢Philippe Wittenbergh ，因为他的帮忙，让这个范例更为完善。更感谢Mark Howells ，因为他提供了最初的 body 背景点子。 <pclass="small alignright"> Big John e-mail©positioniseverything 最后更新日期： September 6, 2002 Created August 24, 2002 繁体中文翻译：yyhuang 简体中文转换: onestab 以下是填满栏段用的 Why don"t cannibals eat clowns？ Answer: They taste funny. What is the difference between a lousy golfer and a lousy skydiver？ Answer: A lousy golfer goes WHAP！ "Oh crap！". A lousy skydiver goes "Oh crap！" WHAP！ Did you hear about the geneticist that tried to cross a potato and a chicken？ He wanted to produce a chicken that would definitely NOT cross the road, but instead,got a bunch of potatoes that sat around pecking eachother"s eyes out. How many Psychiatrists does it take to change a light bulb？ Answer: Only one, but the bulb has to really want to change. Why did the egg cross the road？ Answer: It had an inclination. <h2> 自由伸展的三栏式版面（Three Column Stretch）（页尾） </h2> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]