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"> 
<!-- 

html {margin: 0; padding: 0;} 

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;  
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);} 
/*** Image is 180px wide, and 20px high ***/ 

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;} 

a {color: #000;} 

.alignright {margin-top: 0; text-align: right;} 

.small {font-size: .9em;} 

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;} 

/******************************************************************************* 
                       Positioning rules 
*******************************************************************************/ 
h1, h2 { 
font-size: 22px; 
margin: 0; 
color: #040; 
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/ 
border-top: 4px solid #000; 
border-bottom: 5px solid #000; 
padding: 3px 0 3px 1em; 
} 

h2 {background-color: #638; color: #fff;} 

div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
left: 10px; 
width: 150px; 
color: #ee8; 
padding-top: 10px; 
} 

#middlebox { 
margin: 0 34% 0 170px; 
border-left: 3px solid #000; 
border-right: 3px solid #000; 
padding: 10px; 
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/ 
} 

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
right: 25px;     /*** IE5/mac will show a horizontal scrollbar  
        if this is less than 16px, or other units are used 
        http://www.l-c-n.com/IE5tests/right_pos/ ***/            
width: 30%; 
color: #820; 
padding-top: 10px; 
} 

--> 
</style> 
</head> 

<body> 

<h1> 
自由伸展的三栏式版面（Three Column Stretch）（页首） 
</h1> 

<div id="leftbox"> 
<pre> 
<strong>#leftbox</strong> { 
position: absolute; 
left: 10px; 
width: 180px(150px?); 
} 
</pre> 

<p> 
<strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。 
<p> 
</p> 
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的"宽度(width)"值。 
</p> 
<p> 
<strong>测试用连结</strong> 
</p> 
</div> 

<div id="rightbox">     
<pre> 
<strong>#rightbox</strong> { 
position: absolute; 
right: 2%; 
width: 30%; 
} 

</pre> 
<p> 
<strong>这个栏段</strong>也能显示"body"的背景，但是因为"body"的背景 
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是"body"的背景颜色(background-color)。  
这个栏段的"宽度(width)"和右边界的区域是用百分比作单位，你想用其它单位也可以。 
</p> 
<p> 
如果页面比 640px 还窄，中间和右边栏段使用的"pre"卷标会导致内容重叠。 
</p> 
<p> 
<strong>测试用连结</strong> 
</p> 

</div> 

<div id="middlebox"> 

<div class="return"> 
<strong>返回 p.i.e.</strong> 
</div> 

<pre> 
<strong>#middlebox</strong> {  
margin: 0 34% 0 170px; 
border-left: 2px solid #000; 
border-right: 2px solid #000; 
padding: 0 10px 10px; 
background-color: #6b9; 
} 
</pre> 
<p> 
<strong>中间栏段</strong>有设定背景色，以便跟右边栏段作区分。 
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定"宽度(width)"属性，并不会触发 IE5.x 的区块模块(box model)问题。 
</p> 
<p> 
这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则"body"的背景就会在页尾(footer)下方出现。 
</p> 

<p> 
<strong>这整个范例</strong>没有在任何栏段里宣告"高度(height)"属性，这是为了避掉一些浏览器表现"高度(height)"属性的独特方式。 
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。 
</p> 
<p> 
页首、页尾和中间栏段是"固定的(static)"（或说"相对的(relative)"），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度(height)"。 
</p> 
<p> 
在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后， 
因此这些 div 的"top"属性可以忽略。 
这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。 
所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？ 
</p> 
<p> 
<strong>Mozilla 中</strong>，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙， 
这个范例描述得更详细。 
</p> 
<p> 

<strong>Nav4 中</strong>没办法使用像"div#leftbox"这类语法，所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。 
</p> 
<p> 
<strong>致谢：</strong>再次感谢Philippe Wittenbergh 
，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong>  
Mark Howells 
，因为他提供了最初的 body 背景点子。  
</p> 
<p  class="small alignright"> 
<strong>Big John</strong> 

  e-mail  
©positioniseverything
 
最后更新日期： September 6, 2002
 
Created August 24, 2002 
</p> 
<p class="small alignright"> 
繁体中文翻译：<strong>yyhuang</strong>
 
简体中文转换:
 
<strong>onestab</strong> 

 
<p> 
<strong>以下是填满栏段用的</strong>

 
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 <em>want</em> to change.

 
Why did the egg cross the road?
 
Answer: It had an inclination. 
</p> 

</div> 

<h2> 
自由伸展的三栏式版面（Three Column Stretch）（页尾） 
</h2> 

</body> 
</html> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：div+css实现自适应宽度按钮
下一个：淘宝段正淳的css笔记大全第1/4页
更多图片编程知识: